xhtheme

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.
<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>
Alpine.js:
<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>
Prism.js:
<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>
The source code for <code>build/index.js</code> can be found in the <code>block-code/src</code> directory.

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.

Khang Minh

This plugin allows you to highlight code syntax in your posts. It is simple, lightweight, and very easy to use with plenty of options to choose. This plugin works with both editors and won’t mangle your code format. This plugin utilizes the popular PHP syntax highlighting library – <a href="http://qbnz.com/highlighter/" rel="nofollow ugc">GeSHi</a>.
Some Features
<ul>
<li>Load the plugin only when you need it</li>
<li>Option to load media files (CSS, JS, etc.) only when needed</li>
<li>Built-in hooks for easier customization</li>
<li>A lot of options to choose (I bet you don’t need them all!)</li>
<li>Preview any snipplet of code to match your preference</li>
<li>Possibility to add more languages</li>
<li>Parse code within <code><pre></code> tag, <code><code></code> tag or using shortcode</li>
<li>Parse code within comments</li>
<li>Editor button to add code</li>
<li>Two output methods, Table or Ordered list</li>
<li>Style code globally or language-based</li>
<li>WordPress Multi-site compatible (not tested with WPMU)</li>
<li>And more…</li>
</ul>
Get in touch
<ul>
<li>I’m available at <a href="http://betterwp.net" rel="nofollow ugc">BetterWP.net</a> and you can also follow me on <a href="http://twitter.com/0dd0ne0ut" rel="nofollow ugc">Twitter</a>.</li>
<li>Check out <a href="http://feeds.feedburner.com/BetterWPnet" rel="nofollow ugc">latest WordPress Tips and Ideas</a> from BetterWP.net.</li>
</ul>
Languages
<ul>
<li>English (default)</li>
<li>Italian (it_IT) – Thanks to <a href="http://www.polslinux.it" rel="nofollow ugc">Paolo Stivanin</a>!</li>
</ul>
Please <a href="http://betterwp.net/wordpress-tips/create-pot-file-using-poedit/" rel="nofollow ugc">help translate</a> this plugin!
Visit <a href="http://betterwp.net/wordpress-plugins/bwp-syntax/" rel="nofollow ugc">Plugin’s Official Page</a> for more information!

Better WordPress Syntax Highlighter

This plugin allows you to highlight code syntax in your posts. There are plenty of options to choose.

Xhtheme Code Block vs Better WordPress Syntax Highlighter