xhtheme

<p>Xhtheme Code Block is a plugin for adding code blocks to your WordPress site, supporting syntax highlighting and adapting to the theme’s light and dark mode switching.</p>
<ul>
<li>Supports syntax highlighting for multiple programming languages.</li>
<li>Allows selection of light, dark, or auto mode.</li>
<li>Supports custom filename display.</li>
</ul>
<h3>External Libraries</h3>
<ul>
<li>
<p><strong>Alpine.js</strong>:</p>
<ul>
<li>Version: 3.x.x</li>
<li>Source: <a href="https://alpinejs.dev/" rel="nofollow ugc">Alpine.js Official Website</a></li>
<li>Description: Alpine.js is a lightweight JavaScript framework for adding interactivity to HTML. It is used in the Xhtheme Code Block plugin to manage the reactive state of the settings page, allowing for dynamic updates and user interactions without the need for page reloads.</li>
</ul>
</li>
<li>
<p><strong>Prism.js</strong>:</p>
<ul>
<li>Version: 1.x.x</li>
<li>Source: <a href="https://prismjs.com/" rel="nofollow ugc">Prism.js Official Website</a></li>
<li>Description: Prism.js is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It is used in the Xhtheme Code Block plugin to provide syntax highlighting for a wide range of programming languages.</li>
</ul>
</li>
</ul>
<h3>Source Code</h3>
<p>The source code for <code>build/index.js</code> can be found in the <code>block-code/src</code> directory.</p>


Xhtheme Code Block

A plugin to add code blocks with syntax highlighting to your WordPress site, and adapt to the theme's light and dark mode switching.

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.

Xhtheme Code Block vs Prism Syntax Highlighter (detached)