How to Implement Code Syntax Highlighting in WordPress Without Plugins

Many friends often ask which code highlighting plugin Xiaoz Blog uses. I have always used WP-Syntax, but its styling is average, so I do not particularly recommend it. Here is a method to achieve code highlighting without installing a WordPress plugin. Note that "without plugins" here means no WordPress plugin installation is required, but it still utilizes the JavaScript library highlight.js.

Introduce highlight.js

Generally, you should introduce highlight.js and its CSS styles in the header.php file of your theme. Copy and add the following code:

<link rel="stylesheet" href="https://libs.bsdev.cn/highlight.js/9.8.0/styles/github.css">
<script src = "https://libs.bsdev.cn/highlight.js/9.8.0/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Add a Shortcut Button

Actually, the first step is enough. Normally, when publishing a WordPress article, switch to the Text mode and insert the following code to achieve highlighting:

<pre><code class="html">
Insert code here...
</code></pre>

However, typing the <pre> tags every time is troublesome. You can refer to the article Enhance WordPress Editor with Code to quickly type specific tags. Therefore, you can add the following code to the functions.php file in your theme directory:

// HTML Text Enhancement
add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
function bolo_after_wp_tiny_mce($mce_settings) {
?>
<script type="text/javascript">
QTags.addButton( 'gl', 'Code Highlight', "\n<pre><code class=\"html\">\n\n", "</code></pre>" );
 
function bolo_QTnextpage_arg1() {
}
</script>
<?php
}
// HTML Text Enhancement End

Effect Demo

When publishing an article and switching to Text mode, you will see a new code highlighting button. Double-click twice to type the <pre> tags, then insert your code. By default, it is for HTML code; modify the <code class="html"> language tag according to your actual situation.\n

server {
listen 80;
server_name tool.xiaoz.me;
access_log /data/wwwlogs/tool.xiaoz.me_nginx.log combined;
index index.html index.htm index.php;
include /usr/local/nginx/conf/rewrite/none.conf;
root /data/wwwroot/xiaoz.me/tool;


location ~ [^/]\.php(/|$) {
    #fastcgi_pass remote_php_ip:9000;
    fastcgi_pass unix:/dev/shm/php-cgi.sock;
    fastcgi_index index.php;
    include fastcgi.conf;
    }
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|ico)$ {
    expires 30d;
    access_log off;
    }
location ~ .*\.(js|css)?$ {
    expires 7d;
    access_log off;
    }
}

Effect of inserting Nginx code

Other Notes

highlight.js supports multiple code style themes. The one used above is github.css. If you do not like it, please visit Xiaoz Blog Frontend Library to replace it with a style you prefer.

Known Issues

• There will be an extra empty line at the beginning of each line when inserting code (does not affect usage).
• highlight.js cannot handle angle brackets. If your code contains angle brackets, it is recommended to use a local text editor to batch replace them with escaped characters.

highlight.js Official Website: https://highlightjs.org/