{"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> highlight syntax 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>=\u201dlanguage-xxx\u201d 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 \u0111\u1ed9ng l\u00e0m n\u1ed7i b\u1eadt c\u00fa ph\u00e1p thay v\u00ec ph\u1ea3i ch\u1ec9nh s\u1eeda t\u1eebng b\u00e0i vi\u1ebft \u0111\u1ec3 t\u1ea1o “Block hightlight” ho\u1eb7c ph\u1ea3i th\u00eam c\u00e1c thu\u1ed9c t\u00ednh attr […]<\/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}]}}