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.

JHoppe

Damn simple [markdown]#via shortcode[/markdown] for wordpress. 
This plugin uses <a href="http://parsedown.org/" rel="nofollow ugc">parsedown</a> and <a href="http://highlightjs.org" rel="nofollow ugc">highlight.js</a>. Zero configuration.
Write this into the editor:
<pre><code>[markdown] 
#h1
</code></pre>
<h3>h2</h3>
<pre><code>text 
____source code (two ore more underscores will be replaced by empty spaces) 
____source code (two ore more underscores will be replaced by empty spaces) 

 `javascript
source code
 `
[/markdown]
</code></pre>
and the shortcode content will be parsed with parsedown. Syntax highlighting will appear for the source codes.
This plugin is available at <a href="https://github.com/JohannesHoppe/markdown-shortcode" rel="nofollow ugc">github</a>, too. 
Please report issues at github, pull requests are welcome, too!

Markdown Shortcode

Damn simple markdown for wordpress via shortcode, uses parsedown (parsedown.org) and highlight.js (highlightjs.org).

LumiCode Syntax Highlighter vs Markdown Shortcode