moewe.io

Adrian Mörchen

sachsen.tours

This plugin draws a subtle outline around block editor blocks (first four layers) and separates the title from the content.
Be aware: Once you worked with this plugin, you don’t want to use the block editor without it anymore 🙂
Contribute: <a href="https://github.com/meine-infoseite-de/meine-infoseite-block-highlighter" rel="nofollow ugc">https://github.com/meine-infoseite-de/meine-infoseite-block-highlighter</a>
Sponsored by: <a href="https://sachsen.tours" rel="nofollow ugc">sachsen.tours</a>

Meine Infoseite: Block Highlighter

Helper plugin for highlighting blocks within the block editor.

Jan-Philip Gehrcke

• <a href="https://gehrcke.de/wp-geshi-highlight-demo/" rel="nofollow ugc">Live demo</a>
• Highlights:
<ul>
<li>Supports <a href="https://github.com/GeSHi/geshi-1.0/tree/v1.0.9.1/src/geshi" rel="nofollow ugc">259 languages</a>.</li>
<li>Server-side. Saves bandwidth, latency, and battery compared to client-side rendering.</li>
<li>Near-zero load on the backend. With a caching solution this does not affect your page load time at all.</li>
<li>Line numbering. If you want to (no vertical displacements between code line and line number).</li>
<li>Default style was tested with more than 20 themes, including Twenty Ten to Fifteen, and tweaked based on a bunch of user feedback.</li>
<li>If you’d like to tweak the style: just provide your own CSS file. Styles are highly & easily configurable.</li>
<li>Per-block styles: each code block on a single page can be styled on its own (if that is something you would liked to do).</li>
<li>Clean, small and valid HTML output.</li>
<li>Well-documented source code using modern WordPress API calls.</li>
<li>I have maintained this plugin for several years and I plan to continue to provide support.</li>
<li>Based on <a href="http://qbnz.com/highlighter/" rel="nofollow ugc">GeSHi</a>, a reliable and well-established PHP highlighting engine, used by popular community forum applications such as phpBB or wiki applications such as Dokuwiki or MediaWiki.</li>
</ul>
WP-GeSHi-Highlight works as a drop-in replacement for <a href="https://wordpress.org/extend/plugins/wp-syntax/" rel="ugc">WP-Syntax</a>, which does not seem to be maintained anymore (as of 2015). Make the switch, it should just work (let me know how it went)!
• Usage:
WordPress 5 users: for now I have tested this plugin only with the <a href="https://wordpress.org/plugins/classic-editor/" rel="ugc">Classical Editor</a>. Gutenberg is not yet supported (it may work though, let me know).
Recommendation: use the “Text” (raw) editor. Do not use the “Visual” editor. Switching between both may corrupt the contents of your code blocks.
In the text editor insert code blocks as <code>pre</code> blocks, and use the <code>lang</code> argument to define the language of the code snippet:
<pre><code><pre lang="language">
 CODE
</pre>
</code></pre>
A short example for the <code>bash</code> language:
<pre><code><pre lang="bash">
 $ dd if=/dev/zero of=image.ext3 bs=1M count=10000 oflag=append conv=notrunc
</pre>
</code></pre>
Publish/preview, and have a look at the result!
Also check out the reference documentation for all available options. You can find it on the <a href="https://gehrcke.de/wp-geshi-highlight" rel="nofollow ugc">plugin’s website</a>. Note that more usage examples can be found on the <a href="https://gehrcke.de/wp-geshi-highlight-demo/" rel="nofollow ugc">demo website</a>.
• Issues:
A bunch of websites have used this plugin for years, and it seems to serve its purpose well. If you find an issue please let me know: drop a <a href="mailto:jgehrcke@googlemail.com" rel="nofollow ugc">mail</a> or leave a <a href="http://gehrcke.de/wp-geshi-highlight" rel="nofollow ugc">comment</a>.
• Theme compatibility of the default style sheet:
The default style sheet was tested with recent versions of all official themes (Twenty Ten to Twenty Fifteen), and with a large range of non-official themes such as Vantage, Customizr, ColorWay, Zerif Lite, Responsive, Storefront, Virtue, evolve, Make, Sparkling, Spacious, Enigma, Sydney, Point, Interface, SinglePage.
Certain themes might define styles with a high specificity that negatively affect the visual code block appearance. It is difficult to impossible to anticipate all these cases in advance, so I expect this to happen in rare cases (the past has proven that these things happen). So, I need you to look out for these situations, and please report them!

WP-GeSHi-Highlight — rock-solid syntax highlighting for 259 languages

Simple. Fast. 259 languages. Mobile-friendly. Rock-solid (GeSHi).

Meine Infoseite: Block Highlighter vs WP-GeSHi-Highlight — rock-solid syntax highlighting for 259 languages