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.

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.

Xhtheme Code Block vs WP-Syntax