apfelbox

<p>Integrates the <a href="https://github.com/LeaVerou/prism" rel="nofollow ugc">Prism Syntax Highlighting Library</a> in WordPress.</p>
<p>It is called <em>detached</em>, since the code examples are not stuffed into the rich text editor, together with all the<br />
other texts and content, but they are added separately as custom fields and just referenced via short tags (like footnotes).</p>
<p>Check <em>Other Notes</em> for usage documentation.</p>
<p>The official development repository is <a href="https://github.com/apfelbox/Prism-Detached" rel="nofollow ugc">hosted on Github</a>.</p>
<h3>Usage</h3>
<p>The basic procedure is:</p>
<ol>
<li>Create a custom field and paste the code into it.</li>
<li>Insert the <code>[prism ...]</code> shorttag in your code, where you want the code block to appear.</li>
</ol>
<h4>Shorttag</h4>
<pre><code>[prism key=".." language=".." line=".." line_offset=".." post=".."]
</code></pre>
<ul>
<li><code>key</code>: the name of the custom field, which contains the code (<strong>required</strong>)</li>
<li><code>language</code>: the language to highlight</li>
<li><code>line</code>: highlighted lines (for syntax, check the <a href="http://prismjs.com/plugins/line-highlight/" rel="nofollow ugc">offical docs</a>)</li>
<li><code>line_offset</code>: the offset, with which the line numbering should start</li>
<li><code>post</code>:  if you want to include a code piece of another post, you can explicitly specify the post id here</li>
</ul>
<h4>Cached Assets loader</h4>
<p>The plugin includes (from v1.3 on) a cached assets loader, so that all needed assets are concatenated into<br />
one js and one css file to minimize the HTTP requests.<br />
To make use of the cached assets loader, just create a directory <code>/cache/</code> inside your plugin directory and make it writable for PHP.</p>
<h4>Supported languages</h4>
<p>Only the ones from the official PrismJS repository</p>
<ul>
<li>bash (Bash Unix Shell)</li>
<li>c</li>
<li>clike</li>
<li>coffeescript</li>
<li>cpp (C++)</li>
<li>css</li>
<li>groovy</li>
<li>java</li>
<li>javascript</li>
<li>markup (like: xHTML, MathML, SVG, LaTeX, RSS, XML, OWL, etc.)</li>
<li>php</li>
<li>python</li>
<li>scss (Sassy CSS)</li>
<li>sql</li>
</ul>
<h4>Creating Custom Extensions</h4>
<p>Please read the wiki page: <a href="https://github.com/apfelbox/Prism-Detached/wiki/Creating-A-Custom-Extension" rel="nofollow ugc">Creating A Custom Extension</a>.</p>


Prism Syntax Highlighter (detached)

Adds Prism Syntax Highlighting to WordPress, using custom fields for your code examples.

Agus Prawoto Hadi

<p>Prism is one of the most popular syntax highlighters that widely used by a lot of blog or websites, some of them are popular websites, such as Mozilla, drupal, and SitePoint.</p>
<p>One reason why a lot of websites prefer to use this highlighter is because it’s ability to do custom builds of the language highlighter and plugins you want to be used</p>
<p>This plugin helps you to do all of those tasks and bring this code highlighter to your WordPress easily, provided with many features and user-friendly GUI, make it handy and easy to use.</p>
<p>** Features. **</p>
<ul>
<li>Simple and easy to use</li>
<li>Support both Classic and Guttenberg block editor</li>
<li>All possible syntax languages provided by Prism</li>
<li>Full GUI, don’t need to hardcode parameters</li>
<li>Easy to make a custom build. Choose your own language, theme, and some plugins easily</li>
<li>Custom container max-height. Useful when displaying long code.</li>
<li>Easy to add custom CSS. Useful for responsive design.</li>
<li>Easy to edit code that has been written in tinyMCE text editor (screenshot 4)</li>
<li>Write and Edit code in place. The textarea of code editor, support tab, and back tab, so you can directly edit or write your code, rather than switch back to your code editor.</li>
<li>Load script on demand, load javascript and CSS file of prism highlighter only when needed</li>
<li>Ability to override global options and use individual options for each code block</li>
<li>Support TinyMCE Visual mode and Text Mode (Quick Tags), it also supports the Quick tags used in the admin comment page (screenshot 5)</li>
<li>Use similar pattern with <a href="https://wordpress.org/plugins/aph-syntax-highlighter/" title="APH Syntax Highlighter" rel="ugc">APH Syntax Highlighter</a> and <a href="https://wordpress.org/plugins/crayon-syntax-highlighter/" title="Crayon Syntax Highlighter" rel="ugc">Crayon Syntax Highlighter</a> plugins, so your code will still work using those plugins</li>
<li>Language added: Light plain and dark plain</li>
</ul>
<h3>How To Use</h3>
<p>After installing the plugin, go to the admin setting Settings > Prism Highlighter to configure the global setting including the highlighter languages you want to load, theme, etc.</p>
<p>In the TinyMCE menu (add or edit post or page), there is a new button that can be used to pop up the code editor, simply copy-paste your code and fill in some options</p>
<p>This new button also can be found at the quick tags of comment editor in the Admin Edit Comments page. This quick tag appears when you edit or reply a comment.</p>


APH Prism Syntax Highlighter

The best!

After searching hours and hours for a code highlighting plugin I ended up with this one and it just works. Thank you! 👌

Works! 💯

bro, you forgot to update it

Bringing Prism into WordPress easily. User-friendly GUI, support both classic editor and block editor. Support tab & back-tab in the code editor.

Prism Syntax Highlighter (detached) vs APH Prism Syntax Highlighter