Steven

WP-Syntax provides clean syntax highlighting using 
<a href="http://qbnz.com/highlighter/" rel="nofollow ugc">GeSHi</a> — supporting a wide range of popular 
languages. It supports highlighting with or without line numbers and maintains formatting while copying snippets of code 
from the browser.
It avoids conflicts with other 3rd party plugins by running an early 
pre-filter and a late post-filter that substitutes and pulls the code snippets 
out first and then pushes them back in with highlighting at the end. The 
result is source code formatted and highlighted the way you intended.
Usage, Supported Languages, Styling Guidelines, and Release Notes are available 
in the <a href="https://wordpress.org/extend/plugins/wp-syntax/other_notes/" rel="ugc">Other Notes</a> section.
Want to contribute? WP-Syntax can be found on GitHub. <a href="https://github.com/shazahm1/WP-Syntax" rel="nofollow ugc">Fork and submit your pull requests today!</a>
<h4>Basic Usage</h4>
Wrap code blocks with <code><pre lang="LANGUAGE" line="1"></code> and <code></pre></code> where “LANGUAGE” 
is a <a href="http://qbnz.com/highlighter/" rel="nofollow ugc">GeSHi</a> supported language syntax. 
The <code>line</code> attribute is optional. <a href="https://wordpress.org/extend/plugins/wp-syntax/other_notes/" rel="ugc">More usage examples</a>
<h3>Usage</h3>
Wrap code blocks with <code><pre lang="LANGUAGE" line="1"></code> and <code></pre></code> where “LANGUAGE” is a <a href="http://qbnz.com/highlighter/" rel="nofollow ugc">GeSHi</a> supported 
language syntax. See below for a full list of supported languages. 
The <code>line</code> attribute is optional.
Example 1: PHP, no line numbers
<pre><code><pre lang="php">
<div id="foo">
<?php
 function foo() {
 echo "Hello World!\\n";
 }
?>
</div>
</pre>
</code></pre>
Example 2: Java, with line numbers
<pre><code><pre lang="java" line="1">
public class Hello {
 public static void main(String[] args) {
 System.out.println("Hello World!");
 }
}
</pre>
</code></pre>
Example 3: Ruby, with line numbers starting at 18
<pre><code><pre lang="ruby" line="18">
class Example
 def example(arg1)
 return "Hello: " + arg1.to_s
 end
end
</pre>
</code></pre>
Example 4: If your code already has html entities escaped, use <code>escaped="true"</code> as an option
<pre><code><pre lang="xml" escaped="true">
&lt;xml&gt;Hello&lt;/xml&gt;
</pre>
</code></pre>
Example 5: PHP, with line numbers and highlighting a specific line
<pre><code><pre lang="php" line="1" highlight="3">
<div id="foo">
<?php
 function foo() {
 echo "Hello World!\\n";
 }
?>
</div>
</pre>
</code></pre>
Example 6: PHP, with a caption (file and/or file path of the source file)
<pre><code><pre lang="php" src"https://github.com/shazahm1/Connections/blob/master/connections.php">
<div id="foo">
<?php
 function foo() {
 echo "Hello World!\\n";
 }
?>
</div>
</pre><h3>Supported Languages</h3>
</code></pre>
The following languages are most supported in the <code>lang</code> attribute:
abap, actionscript, actionscript3, ada, apache, applescript, apt_sources, asm, 
asp, autoit, avisynth, bash, bf, bibtex, blitzbasic, bnf, boo, c, 
c_mac, caddcl, cadlisp, cil, cfdg, cfm, cmake, cobol, cpp-qt, cpp, 
csharp, css, d, dcs, delphi, diff, div, dos, dot, eiffel, email, erlang, 
fo, fortran, freebasic, genero, gettext, glsl, gml, bnuplot, groovy, haskell, 
hq9plus, html4strict, idl, ini, inno, intercal, io, java, java5, 
javascript, kixtart, klonec, klonecpp, latex, lisp, locobasic, lolcode 
lotusformulas, lotusscript, lscript, lsl2, lua, m68k, make, matlab, mirc, 
modula3, mpasm, mxml, mysql, nsis, oberon2, objc, ocaml-brief, ocaml, 
oobas, oracle11, oracle8, pascal, per, pic16, pixelbender, perl, 
php-brief, php, plsql, povray, powershell, progress, prolog, properties, 
providex, python, qbasic, rails, rebol, reg, robots, ruby, sas, 
scala, scheme, scilab, sdlbasic, smalltalk, smarty, sql, tcl, teraterm, 
text, thinbasic, tsql, typoscript, vb, vbnet, verilog, vhdl, vim, 
visualfoxpro, visualprolog, whitespace, whois, winbatch, xml, xorg_conf, 
xpp, z80
See the <a href="http://qbnz.com/highlighter/geshi-doc.html" rel="nofollow ugc">GeSHi Documentation</a> 
for a full list of supported languages.
(Bold languages just highlight the more popular ones.)
<h3>Styling Guidelines</h3>
WP-Syntax colors code using the default GeSHi colors. It also uses inline 
styling to make sure that code highlights still work in RSS feeds. It uses a 
default <code>wp-syntax.css</code> stylesheet for basic layout. To customize your styling, 
copy the default <code>wp-content/plugins/wp-syntax/wp-syntax.css</code> to your theme’s 
template directory and modify it. If a file named <code>wp-syntax.css</code> exists in 
your theme’s template directory, this stylesheet is used instead of the default. 
This allows theme authors to add their own customizations as they see fit.
<h3>Advanced Customization</h3>
WP-Syntax supports a <code>wp_syntax_init_geshi</code> action hook to customize GeSHi 
initialization settings. Blog owners can handle the hook in a hand-made plugin 
or somewhere else like this:
<pre><code><?php
add_action('wp_syntax_init_geshi', 'my_custom_geshi_styles');

function my_custom_geshi_styles(&$geshi)
{
 $geshi->set_brackets_style('color: #000;');
 $geshi->set_keyword_group_style(1, 'color: #22f;');
}
?>
</code></pre>
This allows for a great possibility of different customizations. Be sure to 
review the <a href="http://qbnz.com/highlighter/geshi-doc.html" rel="nofollow ugc">GeSHi Documentation</a>.

WP-Syntax

WP-Syntax provides clean syntax highlighting for embedding source code within pages or posts.

wakalab

Markdown Renderer for GitHub brings GitHub-quality content rendering to WordPress. Paste GitHub Flavored Markdown (GFM) – code blocks, tables, task lists, and diagrams – and it renders just like it does on GitHub.com, with no manual HTML and no copy-paste screenshots. Built for technical bloggers, documentation teams, educators, and anyone publishing code-heavy content.
Write blog posts and documentation in Markdown with automatic code highlighting for every fenced code block – READMEs, tutorials, and changelogs render beautifully as-is.
Key Features:
🎨 Beautiful Syntax Highlighting 
* Powered by Shiki – the same syntax highlighter used by VS Code 
* Native grammars for 30+ programming languages, with alias and approximate-grammar fallbacks for many more 
* Two carefully tuned themes – GitHub Light and GitHub Dark – with automatic light/dark switching 
* Automatic language detection
📊 Mermaid Diagram Support 
* 9 diagram types: flowcharts, sequence, class, state, Gantt, user journey, Git graph, ER, and pie charts 
* Professional diagram rendering 
* Interactive zoom functionality 
* Error handling with user-friendly messages
📈 Chart.js Chart Support 
* Create line, bar, pie, doughnut, and more chart types 
* 8 chart types including scatter, bubble, radar, and Polar Area 
* Simple JSON configuration in “`chart fenced code blocks 
* Responsive and interactive charts
🌱 PlantUML Diagram Support (optional, opt-in) 
* UML and more from “`plantuml fenced code blocks 
* PlantUML has no in-browser renderer, so diagrams are produced by an external PlantUML/Kroki server 
* Ships ready to configure, but no content is sent off-site until you set a server URL and accept the privacy notice in the settings (see the Third Party Services section)
✨ GitHub Flavored Markdown 
* Tables, task lists, strikethrough 
* Automatic URL linking 
* Footnotes support 
* 100% compatible with GitHub markdown
📋 Copy Button Feature 
* One-click code copying 
* GitHub-style user experience 
* Full accessibility support 
* Mobile-friendly design
⚡ Performance Optimized 
* Asset lazy loading – libraries load only on pages that use them 
* Minimal performance impact 
* Self-contained – no external CDN required 
* Optimized for WordPress
🌍 Developer Friendly 
* Clean, semantic HTML output 
* Extensive hooks and filters 
* Translation ready (i18n) 
* WordPress coding standards
Perfect for: 
* Technical blogs and tutorials 
* Documentation websites 
* Code portfolios 
* Educational content 
* API documentation 
* Developer resources
<h3>Technical Requirements</h3>
<ul>
<li>WordPress 6.8 or higher</li>
<li>PHP 8.2 or higher</li>
<li>Modern browser with JavaScript enabled</li>
<li>Recommended: 128MB+ PHP memory limit</li>
<li>Recommended: gzip or Brotli compression enabled for static JavaScript on your web server</li>
</ul>
Why server compression matters: 
The syntax-highlighting and diagram libraries are large when uncompressed (Shiki ~2.35 MB, Mermaid ~3.2 MB) but shrink dramatically when delivered with gzip or Brotli (Shiki ~302 KB, Mermaid ~908 KB). For the best front-end performance, ensure your web server compresses static JavaScript (for example mod_deflate/mod_brotli on Apache, or the gzip/brotli directives on nginx). Most managed hosts and CDNs enable this by default. The plugin adds a Tools → Site Health check that reports whether these bundles are actually being served compressed.
<h3>Support</h3>
For support, please visit the WordPress.org support forum for this plugin. Our team actively monitors and responds to support requests.
Before posting a support request: 
* Check the FAQ section above for common questions 
* Ensure you’re using the latest version of the plugin 
* Include your WordPress and PHP versions in your support request
Feature Requests: 
We welcome feature suggestions! Please post them in the support forum with detailed descriptions of your use case.
<h3>Source Code</h3>
This plugin uses build tools for development efficiency.
Compressed File Source Code: 
* build/index.js: WordPress Block Editor integration code 
 * Source: blocks/markdown/src/ folder 
 * Build: npm run build 
* assets/libs/shiki/shiki.min.js: Shiki syntax highlighter (self-contained bundle, no CDN) 
 * Source: scripts/vendor/shiki-entry.mjs 
 * Build: npm run vendor:shiki
Source Code Access: 
* GitHub Repository: https://github.com/my-biz-dev/markdown-renderer-for-github 
* License: GPL v2 or later 
* Development Branch: main
Build Instructions: 
1. Install Node.js 22 LTS (see .nvmrc) 
2. Install dependencies with <code>npm install</code> 
3. Build with <code>npm run build</code> 
4. Run tests with <code>npm run test</code>
Developer Resources: 
* Development Environment Setup: See CLAUDE.md and docs/DEVELOPMENT.md 
* Contributing: See CONTRIBUTING.md 
* Build Process Details: See BUILD.md
<h3>Third Party Services</h3>
By default this plugin runs entirely on your own server. The core rendering libraries are bundled locally and make no external requests:
<ul>
<li>Shiki syntax highlighter – served from your WordPress installation (no CDN)</li>
<li>Mermaid diagram renderer – served from your WordPress installation (no CDN)</li>
<li>Chart.js chart renderer – served from your WordPress installation (no CDN)</li>
<li>markdown-it parser – bundled locally</li>
</ul>
Optional features that contact an external server (opt-in, off by default):
Two features can send diagram source to an external rendering server. Both are inactive until you explicitly enable, configure a server URL, and accept the in-plugin privacy notice:
<ul>
<li>PlantUML diagrams – PlantUML has no in-browser renderer, so the source of each “`plantuml block is sent to a PlantUML/Kroki server to produce the image.
<ul>
<li>Default server (configurable, or self-hostable): https://www.plantuml.com/plantuml</li>
<li>Service: PlantUML – https://plantuml.com/</li>
</ul>
</li>
<li>Server-side Mermaid rendering (Kroki) – an optional mode that pre-renders Mermaid diagrams on a Kroki server for faster first paint. When enabled, the Mermaid source is sent to the configured server.
<ul>
<li>Default server (configurable, or self-hostable): https://kroki.io</li>
<li>Service: Kroki – https://kroki.io/</li>
</ul>
</li>
</ul>
To keep diagram source private you can point either feature at a server you self-host. When both options are left in their default (disabled) state, no diagram data or any other content leaves your site.
Privacy & Security Benefits (default configuration): 
* No tracking, analytics, or data collection 
* No data is transmitted to external servers unless you opt in to PlantUML or server-side Mermaid rendering 
* Works offline and in closed networks with the default settings
<h3>Privacy</h3>
This plugin does not collect any personal data, and with the default settings all processing happens locally on your server. If you opt in to PlantUML or server-side (Kroki) Mermaid rendering, the source text of those diagrams is sent to the rendering server you configure – choose a server you trust, or self-host one, for sensitive content.
<h3>Credits</h3>
<ul>
<li>Syntax highlighting: <a href="https://shiki.style/" rel="nofollow ugc">Shiki</a></li>
<li>Diagram rendering: <a href="https://mermaid.js.org/" rel="nofollow ugc">Mermaid</a></li>
<li>Chart rendering: <a href="https://www.chartjs.org/" rel="nofollow ugc">Chart.js</a></li>
<li>Markdown parsing: <a href="https://markdown-it.github.io/" rel="nofollow ugc">markdown-it</a></li>
</ul>
<h3>Developer Information</h3>
This section provides essential information for developers who want to extend or customize the plugin.
For complete API documentation, architecture diagrams, and customization examples, see: 
<a href="https://github.com/my-biz-dev/markdown-renderer-for-github/tree/main/docs" rel="nofollow ugc">Developer Documentation on GitHub</a>
<h4>Available Hooks and Filters</h4>
Actions:
<ul>
<li><code>gfmr_metadata_saved</code> – Fired when code block metadata is saved
<ul>
<li>Parameters: <code>$post_id</code> (int), <code>$metadata</code> (array)</li>
<li>Use case: Sync metadata with external services, logging</li>
</ul>
</li>
</ul>
Filters:
<ul>
<li>
<code>gfmr_metadata_get_metadata</code> – Filter retrieved metadata before use
<ul>
<li>Parameters: <code>$metadata</code> (array), <code>$post_id</code> (int)</li>
<li>Use case: Custom language detection, metadata modification</li>
</ul>
</li>
<li>
<code>gfmr_schema_data</code> – Filter Schema.org JSON-LD data before output
<ul>
<li>Parameters: <code>$schema</code> (array), <code>$post</code> (WP_Post)</li>
<li>Use case: Add custom schema properties, author profiles</li>
</ul>
</li>
</ul>
<h4>PHP Constants</h4>
<ul>
<li><code>GFMR_PLUGIN_FILE</code> – Plugin main file path</li>
<li><code>GFMR_SLUG</code> – Plugin slug (‘markdown-renderer-for-github’)</li>
<li><code>GFMR_URI</code> – Plugin URL</li>
<li><code>GFMR_PATH</code> – Plugin directory path</li>
<li><code>GFMR_PLUGIN_PATH</code> – Plugin directory name (relative)</li>
<li><code>GFMR_PLUGIN_BASENAME</code> – Plugin basename</li>
<li><code>GFMR_ASSETS_PATH</code> – Assets directory URL</li>
</ul>
<h4>JavaScript Global Objects</h4>
<ul>
<li><code>wpGfmConfig</code> – Plugin configuration object</li>
<li><code>wpGfmRenderer</code> – Core rendering API (processCodeBlocks, renderContent, initialize)</li>
<li><code>wpGfmHighlighter</code> – Highlighter wrapper instance</li>
<li><code>wpGfmShikiHighlighter</code> – Actual Shiki highlighter instance</li>
<li><code>wpGfmUnifiedHighlight(code, lang, options)</code> – Unified highlight function</li>
<li><code>wpGfmSwitchTheme(newTheme)</code> – Theme switching function (‘light’, ‘dark’, ‘system’)</li>
<li><code>wpGfmRenderDiagram(content, element, options)</code> – Diagram rendering function</li>
</ul>
<h4>Settings Option</h4>
Option name: <code>gfmr_theme_settings</code>
Available keys:
<ul>
<li><code>theme</code> – Theme setting (‘light’, ‘dark’, ‘system’)</li>
<li><code>schema_enabled</code> – Enable Schema.org JSON-LD output (bool)</li>
<li><code>schema_auto_detect_type</code> – Auto-detect article type (bool)</li>
<li><code>schema_include_author</code> – Include author in schema (bool)</li>
<li><code>schema_include_publisher</code> – Include publisher in schema (bool)</li>
</ul>
<h4>Plugin Development</h4>
This plugin follows WordPress coding standards and provides clean, semantic HTML output.
Detailed Documentation:
For complete documentation including full API reference with code examples, architecture diagrams (Mermaid), step-by-step customization guides, and CSS class reference, visit:
<a href="https://github.com/my-biz-dev/markdown-renderer-for-github/tree/main/docs" rel="nofollow ugc">GitHub Developer Documentation</a>

Markdown Renderer for GitHub

Render GitHub Flavored Markdown in WordPress: Shiki code highlighting, Mermaid diagrams, and Chart.js charts. For documentation and dev blogs.

WP-Syntax vs Markdown Renderer for GitHub