{"id":1152,"date":"2023-07-03T21:25:20","date_gmt":"2023-07-03T14:25:20","guid":{"rendered":"https:\/\/dev.artru.eu.org\/?p=1152"},"modified":"2023-10-27T14:37:55","modified_gmt":"2023-10-27T07:37:55","slug":"highlightjs-automatic-syntax-highlighting","status":"publish","type":"post","link":"https:\/\/artru.net\/en\/highlightjs-automatic-syntax-highlighting\/","title":{"rendered":"HighlightJS automatically highlights pre, code . syntax"},"content":{"rendered":"

I have used many syntax highlighting plugins in wordpress. However, these plugins are not satisfied. Especially the feature automatic<\/strong> syntax highlighting instead of having to edit each article to create "Block highlight" or having to add attr attributes like class.<\/p>\n\n\n\n

After a while, I found HighlightJS.<\/p>\n\n\n\n

About HighlightJS<\/h2>\n\n\n\n

This is a syntax highlighting tool written in JavaScript that supports more than 180 languages. It does not depend on any other framework and has automatic language detection.<\/p>\n\n\n\n

Here is an example html file before and after using Highlight.JS.<\/p>\n\n\n

\n
\"Example
Example HTML with Highlight JS<\/figcaption><\/figure>\n<\/div>\n\n\n

Basic usage<\/h2>\n\n\n\n

Automatic code marking<\/h3>\n\n\n\n

To use it, you need to embed 2 js and css files in your website for HighlightJS to work. Code hljs.highlightAll()<\/code> By default, it will automatically find and highlight the code inside the tag <pre> <code><\/code>.<\/p>\n\n\n\n

<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/gh\/highlightjs\/cdn-release@latest\/build\/styles\/default.min.css\">\n<script src=\"https:\/\/cdn.jsdelivr.net\/gh\/highlightjs\/cdn-release@latest\/build\/highlight.min.js\"><\/script>\n<script>hljs.highlightAll();<\/script><\/code><\/pre>\n\n\n\n
Manual code marking<\/h3>\n\n\n\n
If you want to specify a specific language you want, you can use the attribute class<\/code>="language-xxx" for tag <pre>, <code><\/code> there.<\/p>\n\n\n\n
<code class=\"language-php\">...<\/code>\n<pre class=\"language-css\"><code>...<\/code><\/pre><\/code><\/pre>\n\n\n\n
Ignore code block markup<\/h3>\n\n\n\n
To completely skip marking a block of code, use class=\"nohighlight\"<\/code>.<\/p>\n\n\n\n
<code class=\"nohighlight\">...<\/code>\n<pre class=\"nohighlight\"><code>...<\/code><\/pre><\/code><\/pre>\n\n\n\n
Advanced usage<\/h2>\n\n\n\n
According to the developer, by default it only detects the language and color, and does not have options like line numbers or copy buttons.<\/p>\n\n\n\n
However, we can still do it thanks to the DEVs on github developing more features.<\/p>\n\n\n\n
Numbering Line Numbers<\/h3>\n\n\n\n
To add numbering you need to embed additional files highlightjs-line-numbers.js<\/a><\/p>\n\n\n\n
<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/highlightjs-line-numbers.js@latest\/dist\/highlightjs-line-numbers.min.js\"><\/script><\/code><\/pre>\n\n\n\n
Then call the function hljs.initLineNumbersOnLoad()<\/code> right behind hljs.highlightAll()<\/code><\/p>\n\n\n\n
<script>\n  hljs.highlightAll();\n  hljs.initLineNumbersOnLoad();\n<\/script><\/code><\/pre>\n\n\n\n
Code copy button<\/h3>\n\n\n\n
I just found this extension at highlightjs-copy<\/a>. You can refer to more to customize according to your own will.<\/p>\n\n\n\n
Like Line Numbers, you need to embed JS and CSS files to customize the copy button.<\/p>\n\n\n\n
<script src=\"https:\/\/unpkg.com\/highlightjs-copy\/dist\/highlightjs-copy.min.js\"><\/script>\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/highlightjs-copy\/dist\/highlightjs-copy.min.css\" \/><\/code><\/pre>\n\n\n\n
Unlike line numbers, you should set the function hljs.addPlugin(new CopyButtonPlugin())<\/code> before hljs.highlightAll()<\/code><\/p>\n\n\n\n
<script>\n  hljs.addPlugin(new CopyButtonPlugin());\n  hljs.initLineNumbersOnLoad();\n<\/script><\/code><\/pre>\n\n\n\n
Custom js and css files<\/h3>\n\n\n\n
You can load js, css files and save them internally in your website. It also has a language option for the user to create a separate JS file.<\/p>\n\n\n
\n
\"Custom
Custom package Highlight JS<\/figcaption><\/figure>\n<\/div>\n\n\n
So is the CSS. You can choose the syntax themes according to your preferences at Styles Github<\/a>.<\/p>\n\n\n\n
Reference source:<\/strong> highlightjs.org<\/a><\/p>","protected":false},"excerpt":{"rendered":"
M\u00ecnh \u0111\u00e3 t\u1eebng s\u1eed d\u1ee5ng qua nhi\u1ec1u plugin l\u00e0m n\u1ed5i b\u1eadt c\u00fa ph\u00e1p trong wordpress. Tuy nhi\u00ean c\u00e1c plugin n\u00e0y ch\u01b0a l\u00e0m h\u00e0i l\u00f2ng. \u0110\u1eb7c bi\u1ec7t l\u00e0 t\u00ednh n\u0103ng t\u1ef1 […]<\/p>\n","protected":false},"author":1,"featured_media":1224,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-1152","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website"],"_links":{"self":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/1152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/comments?post=1152"}],"version-history":[{"count":0,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/1152\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/media\/1224"}],"wp:attachment":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/media?parent=1152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/categories?post=1152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/tags?post=1152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}