dwhitevisoft

WP Markdown Syntax Sugar work in conjunction with plugins such as <a href="https://wordpress.org/extend/plugins/wp-markdown/" rel="ugc">wp-markdown</a> 
and <a href="https://wordpress.org/extend/plugins/wp-highlightjs/" rel="ugc">wp-highlight.js</a>. Markdown is fantastic markup for easily 
writing blogs, and <a href="http://softwaremaniacs.org/soft/highlight/en/" rel="nofollow ugc">highlight.js</a> is an extremely easy way to highlight 
code examples. In most cases, highlight.js automatically detects the proper language for a block of code. In certain 
cases, primarily if your code example is short, highlight.js could improperly detect the language that you are using; 
that is where this plugin comes into play. By adding one line to your code blocks, you can explicitly set the language 
that you are using, allowing highlight.js to properly format your code.
The concept is inspired by the <a href="https://github.com/spjwebster/wp-markdown-syntax-highlight" rel="nofollow ugc">wp-markdown-syntax-highlight</a> 
plugin.
The usage is extremely simple. Just add a shebang as the first line of your code example with the language you are using.
<pre><code>#!ruby
class Foo < Bar
 def hello
 puts "Hello World!"
 end
end
</code></pre>
The shebang is removed, and the code is outputted as:
<pre><code><pre><code class="language-ruby">class Foo < Bar
 def hello
 puts "Hello World!"
 end
end</code></pre>
</code></pre>
Now the code block is properly formatted for highlight.js to do its magic, and the code snippet will be properly 
highlighted.

WP-Markdown-Syntax-Sugar

WP Markdown Syntax Sugar is a simple plugin that works in conjunction with Markdown code blocks and highlight.js to properly format code.

cr8vstacks

LumiCode is a premium-quality syntax highlighter built for developers and technical bloggers who want beautiful, readable code on their WordPress site – without fighting the editor. Learn more and view the live demo at https://cr8vstacks.com/dev-playground/lumicode-syntax-highlighter/
<h3>Key Features</h3>
<ul>
<li>40+ languages auto-detected – PHP, JavaScript, TypeScript, Python, Go, Rust, SQL, YAML, Bash, and more</li>
<li>13 bundled themes – Atom One, Dracula, GitHub, Monokai, Night Owl, Nord, Solarized, VS 2015, Xcode, and more, powered by highlight.js 11.11.1</li>
<li>Dark & Light mode – toggle from the admin topbar. Applies to both admin UI and frontend code boxes</li>
<li>Copy to Clipboard – one-click copy button on every code block</li>
<li>Line numbers – perfectly aligned, synced to font size and line height</li>
<li>Collapse / Expand – long code blocks auto-collapse after a configurable number of lines</li>
<li>Filename / language badge – shows in the titlebar of every code box</li>
<li>TinyMCE integration – Insert Code Block button in the Classic Editor toolbar, with language detection and all options</li>
<li>Gutenberg block – native block editor support</li>
<li>Code Scanner – scans your entire site for bare <code><pre></code> blocks and lets you apply LumiCode with one click, or dismiss</li>
<li>Auto-detect – wraps any existing <code><pre></code> blocks automatically on the frontend without touching your content</li>
</ul>
<h3>How It Works</h3>
LumiCode renders code blocks server-side (shortcodes + TinyMCE insertion) and enhances them on the frontend with a lightweight JS renderer. The renderer wraps <code><pre class="lumicode-pre"></code> elements in a beautiful VS Code-style chrome (titlebar, statusbar, line numbers, copy button) and runs highlight.js for syntax coloring.
No page builders required. Works with any theme.
<h3>Shortcode Usage</h3>
<pre><code>[lumicode lang="javascript"]
const greeting = "Hello, world!";
console.log(greeting);
[/lumicode]
</code></pre>
All shortcode attributes: 
* <code>lang</code> – language identifier (e.g. <code>php</code>, <code>python</code>, <code>typescript</code>) 
* <code>title</code> – filename shown in titlebar (e.g. <code>config.js</code>) 
* <code>highlight</code> – lines to accent (e.g. <code>1,3-5</code>) 
* <code>collapse</code> – force collapse (<code>true</code>/<code>false</code>) 
* <code>collapse-after</code> – collapse after N lines (overrides global setting)
<h3>Performance</h3>
<ul>
<li>highlight.js is loaded locally (v11.11.1) for speed and privacy</li>
<li>Our CSS and JS are tiny (<15 KB combined, unminified)</li>
<li>No jQuery dependency on the frontend</li>
</ul>

LumiCode Syntax Highlighter

Beautiful syntax highlighting for WordPress. Auto-detects 40+ languages, with copy buttons, line numbers, collapse, and a dark/light theme switcher.

WP-Markdown-Syntax-Sugar vs LumiCode Syntax Highlighter