2024-10-19 19:09:53 +03:00
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" / > < meta author = "Alex Mikhailov" / > < meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" / > < meta name = "color-scheme" content = "light dark" / > < meta http-equiv = "content-language" content = "en-us" / > < meta name = "description" content = "Use highlight.js for code syntax highlighting" / > < meta property = "og:description" content = "Use highlight.js for code syntax highlighting" / > < meta property = "og:image" content = "https://fidonode.me/resources/images/preview/posts/improve_code_blocks.org.png" / > < meta property = "og:title" content = "Improve code blocks" / > < meta name = "twitter:description" content = "Use highlight.js for code syntax highlighting" / > < meta name = "twitter:title" content = "Improve code blocks" / > < meta name = "twitter:image" content = "https://fidonode.me/resources/images/preview/posts/improve_code_blocks.org.png" / > < meta name = "twitter:card" content = "summary_large_image" / > < link rel = "icon" type = "image/x-icon" href = "/resources/favicon.ico" / > < link rel = "stylesheet" type = "text/css" href = "/resources/css/pico.sand.min.css" / > < script defer = "true" src = "https://umami.dokutsu.xyz/script.js" data-website-id = "d52d9af1-0c7d-4531-84c6-0b9c2850011f" > < / script > < title > Improve code blocks< / title > < link id = "highlight-theme" rel = "stylesheet" type = "text/css" / > < script src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js" > < / script > < script src = "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/bash.min.js" > < / script > < script src = "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/lisp.min.js" > < / script > < script src = "/resources/js/theme-selector.js" > < / script > < / head > < body > < header class = "header" > < div class = "container" > < nav > < ul > < li > < strong > Alex Mikhailov< / strong > < / li > < / ul > < ul > < li > < a href = "/index.html" > About< / a > < / li > < li > < a href = "/posts.html" > Blog< / a > < / li > < li > < a href = "/rss.xml" > RSS< / a > < / li > < / ul > < / nav > < / div > < / header > < main class = "container blog-post" > < hgroup > < h1 > Improve code blocks< / h1 > < p > Use highlight.js for code syntax highlighting< / p > < nav > < ul > < li > Tags:< / li > < li > < mark > < a href = "/tags/@org-mode.html" class = "secondary" > @org-mode< / a > < / mark > < / li > < li > < mark > < a href = "/tags/@elisp.html" class = "secondary" > @elisp< / a > < / mark > < / li > < li > < mark > < a href = "/tags/@highlightjs.html" class = "secondary" > @highlightjs< / a > < / mark > < / li > < / ul > < / nav > < / hgroup > < div id = "table-of-contents" role = "doc-toc" >
2024-06-26 07:55:58 +03:00
< h2 > Table of Contents< / h2 >
2024-10-19 19:09:53 +03:00
< div id = "text-table-of-contents" role = "doc-toc" >
2024-06-26 07:55:58 +03:00
< ul >
2024-11-09 22:10:41 +02:00
< li > < a href = "#orgd0a425a" > What is the problem with default highlighting?< / a > < / li >
< li > < a href = "#org712f60e" > Highlight.js< / a >
2024-06-26 07:55:58 +03:00
< ul >
2024-11-09 22:10:41 +02:00
< li > < a href = "#orgcd43fbb" > Change code block template< / a > < / li >
< li > < a href = "#orgb412f22" > Plug Highlight.js< / a > < / li >
< li > < a href = "#org5179bb6" > Respect prefers-color-scheme< / a > < / li >
2024-06-26 07:55:58 +03:00
< / ul >
< / li >
2024-11-09 22:10:41 +02:00
< li > < a href = "#orgedc7142" > Whole config< / a > < / li >
2024-06-26 07:55:58 +03:00
< / ul >
< / div >
< / div >
2024-11-09 22:10:41 +02:00
< div id = "outline-container-orgd0a425a" class = "outline-2" >
< h2 id = "orgd0a425a" > What is the problem with default highlighting?< / h2 >
< div class = "outline-text-2" id = "text-orgd0a425a" >
2024-06-27 20:24:36 +03:00
< p >
Htmlize works poorly with headless publishing. It lacks extensibility, including features like line numbers, a copy button, and the ability to highlight predefined parts of the code.
< / p >
2024-06-26 07:55:58 +03:00
< / div >
< / div >
2024-11-09 22:10:41 +02:00
< div id = "outline-container-org712f60e" class = "outline-2" >
< h2 id = "org712f60e" > Highlight.js< / h2 >
< div class = "outline-text-2" id = "text-org712f60e" >
2024-06-27 20:24:36 +03:00
< / div >
2024-11-09 22:10:41 +02:00
< div id = "outline-container-orgcd43fbb" class = "outline-3" >
< h3 id = "orgcd43fbb" > Change code block template< / h3 >
< div class = "outline-text-3" id = "text-orgcd43fbb" >
2024-06-27 20:24:36 +03:00
< p >
We need to make small changes in how code blocks are rendered. By default, Org Export exports code blocks as < code > < pre> < /pre> < / code > . For Highlight.js, we need < code > < pre> < code> < /code> < /pre> < / code > . Additionally, we need to set the correct language name in the class attribute. Since Highlight.js does not support < code > elisp< / code > , I rewrite it to regular < code > lisp< / code > using the < code > my/replace-substring< / code > function.
< / p >
< pre > < code class = "language-lisp" > (setq
my/lang-substitution-map ' ((" elisp" . " lisp" )))
(defun my/replace-substrings (input-string)
" Replace substrings in INPUT-STRING according to SUBSTITUTION-MAP."
(let ((output-string input-string))
(dolist (pair my/lang-substitution-map)
(let ((old (regexp-quote (car pair)))
2024-10-19 19:09:53 +03:00
(new (cdr pair)))
(setq output-string (replace-regexp-in-string old new output-string))))
2024-06-27 20:24:36 +03:00
output-string))
(defun my/src-block (src-block contents info)
2024-06-26 07:55:58 +03:00
" Translate SRC-BLOCK element into HTML.
CONTENTS is nil. INFO is a plist holding contextual information."
(let* (
2024-10-19 19:09:53 +03:00
(org-language (format " language-%s" (org-element-property :language src-block)))
(language (my/replace-substrings org-language))
(code (org-element-property :value src-block)))
2024-06-26 07:55:58 +03:00
(esxml-to-xml
`(pre ()
(code ((class . ,language))
2024-10-19 19:09:53 +03:00
,(org-html-encode-plain-text code)
))
2024-06-26 07:55:58 +03:00
)
)
)
(org-export-define-derived-backend ' my-html ' html
:translate-alist ' (
2024-10-19 19:09:53 +03:00
(template . my/template)
(src-block . my/src-block)
))
2024-06-26 07:55:58 +03:00
< / code > < / pre >
< / div >
< / div >
2024-11-09 22:10:41 +02:00
< div id = "outline-container-orgb412f22" class = "outline-3" >
< h3 id = "orgb412f22" > Plug Highlight.js< / h3 >
< div class = "outline-text-3" id = "text-orgb412f22" >
2024-06-27 20:24:36 +03:00
< p >
I do not want to load Highlight.js on every page, so I need to check if the initial Org file contains code blocks. Depending on this, we will render the part of the tree with JavaScript or not.
< / p >
2024-06-26 07:55:58 +03:00
< pre > < code class = "language-lisp" > (defun my/org-has-src-blocks-p (info)
" Return t if the Org document represented by INFO has source code blocks."
(org-element-map (plist-get info :parse-tree) ' src-block
(lambda (src-block) t)
nil t))
(defun my/template (contents info)
(let* ((title-str (org-export-data (plist-get info :title) info))
2024-10-19 19:09:53 +03:00
...
(has-src-blocks (my/org-has-src-blocks-p info)))
2024-06-26 07:55:58 +03:00
...
(script ((defer . " true" ) (src . " https://umami.dokutsu.xyz/script.js" ) (data-website-id . " d52d9af1-0c7d-4531-84c6-0b9c2850011f" )) ())
2024-06-27 20:24:36 +03:00
2024-06-26 07:55:58 +03:00
,(when has-src-blocks
2024-06-27 20:24:36 +03:00
`(nil ()
2024-10-19 19:09:53 +03:00
(link ((id . " highlight-theme" ) (rel . " stylesheet" ) (type . " text/css" )))
(script ((src . " https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js" )) ())
(script ((src . " https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/bash.min.js" )) ())
(script ((src . " https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/lisp.min.js" )) ())
(script ((src . " /resources/js/theme-selector.js" )) ())
)
2024-06-27 20:24:36 +03:00
)
2024-06-26 07:55:58 +03:00
(title () ,title-str)
< / code > < / pre >
< / div >
< / div >
2024-11-09 22:10:41 +02:00
< div id = "outline-container-org5179bb6" class = "outline-3" >
< h3 id = "org5179bb6" > Respect prefers-color-scheme< / h3 >
< div class = "outline-text-3" id = "text-org5179bb6" >
2024-06-27 20:24:36 +03:00
< p >
Additionally, I think it's a good idea to respect the < code > prefers-color-scheme< / code > property of the user's browser. We can switch CSS files based on this property. We should also subscribe to changes in this property to handle the edge case when it switches while reading the page.
< / p >
< pre > < code class = "language-javascript" > hljs.highlightAll(); // Initialize highlight.js
// Function to set the theme based on the preferred color scheme
function setHighlightTheme() {
const highlightThemeLink = document.getElementById(" highlight-theme" );
2024-06-26 07:55:58 +03:00
const darkTheme =
2024-06-27 20:24:36 +03:00
" https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/base16/solarized-dark.min.css" ;
2024-06-26 07:55:58 +03:00
const lightTheme =
2024-06-27 20:24:36 +03:00
" https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/base16/solarized-light.min.css" ;
2024-06-26 07:55:58 +03:00
if (
window.matchMedia & amp;& amp;
window.matchMedia(" (prefers-color-scheme: dark)" ).matches
) {
2024-06-27 20:24:36 +03:00
highlightThemeLink.href = darkTheme;
2024-06-26 07:55:58 +03:00
} else {
2024-06-27 20:24:36 +03:00
highlightThemeLink.href = lightTheme;
2024-06-26 07:55:58 +03:00
}
}
// Initial theme set
2024-06-27 20:24:36 +03:00
setHighlightTheme();
2024-06-26 07:55:58 +03:00
// Listen for changes in the preferred color scheme
window
.matchMedia(" (prefers-color-scheme: dark)" )
2024-06-27 20:24:36 +03:00
.addEventListener(" change" , setHighlightTheme);
2024-06-26 07:55:58 +03:00
< / code > < / pre >
< / div >
< / div >
< / div >
2024-11-09 22:10:41 +02:00
< div id = "outline-container-orgedc7142" class = "outline-2" >
< h2 id = "orgedc7142" > Whole config< / h2 >
< div class = "outline-text-2" id = "text-orgedc7142" >
2024-06-26 07:55:58 +03:00
< p >
In between posts I've switched from < code > sxml< / code > to < code > esxml< / code > so here is the current config.
< / p >
< pre > < code class = "language-lisp" > ;; Load the publishing system
;; Configure environment
;;
(setq debug-on-error t)
(let ((default-directory (concat " ~/.config/emacs/.local/straight/build-" emacs-version " /" )))
(normal-top-level-add-subdirs-to-load-path))
(add-to-list ' custom-theme-load-path
2024-10-19 19:09:53 +03:00
(concat " ~/.config/emacs/.local/straight/build-" emacs-version " /doom-themes" ))
2024-06-26 07:55:58 +03:00
(add-to-list ' custom-theme-load-path (concat " ~/.config/emacs/.local/straight/build-" emacs-version " /base16-theme" ))
(add-to-list ' custom-theme-load-path (concat " ~/.config/emacs/.local/straight/build-" emacs-version " /moe-theme" ))
(require ' xml)
(require ' dom)
(require ' ox-publish)
(require ' ox-rss)
(require ' org)
(require ' esxml)
;; (require ' esxml-html)
;;
;;Variables
;;
(setq
my/url " https://fidonode.me"
my/web-export-path " ./public"
my/blog-src-path " ./home/05 Blog"
my/lang-substitution-map ' ((" elisp" . " lisp" ))
org-html-validation-link nil ;; Don' t show validation link
org-html-htmlize-output-type nil
org-src-fontify-natively t)
;;
;;Templates
;;
(defun my/footer (info)
`(footer ((class . " footer" ))
(hr () )
(small ()
2024-10-19 19:09:53 +03:00
(p () " Alex Mikhailov" )
(p () " Built with: "
(a ((href . " https://www.gnu.org/software/emacs/" )) " GNU Emacs" ) " "
(a ((href . " https://orgmode.org/" )) " Org Mode" ) " "
(a ((href . " https://picocss.com/" )) " picocss" )
)
)
2024-06-26 07:55:58 +03:00
))
(defun my/header (info)
(let ((title-str (org-export-data (plist-get info :title) info)))
`(header ((class . " header" ))
(nav ()
2024-10-19 19:09:53 +03:00
(ul ()
(li ()
(strong () ,title-str)))
(ul ()
(li () (a ((href . " /index.html" )) " About" ))
(li () (a ((href . " /posts.html" )) " Blog" ))
(li () (a ((href . " /rss.xml" )) " RSS" ))
)
))
2024-06-26 07:55:58 +03:00
)
)
(defun my/src-block (src-block contents info)
" Translate SRC-BLOCK element into HTML.
CONTENTS is nil. INFO is a plist holding contextual information."
(let* (
2024-10-19 19:09:53 +03:00
(org-language (format " language-%s" (org-element-property :language src-block)))
(language (my/replace-substrings org-language))
(code (org-element-property :value src-block)))
2024-06-26 07:55:58 +03:00
(esxml-to-xml
`(pre ()
(code ((class . ,language))
2024-10-19 19:09:53 +03:00
,(org-html-encode-plain-text code)
))
2024-06-26 07:55:58 +03:00
)
)
)
(defun my/template (contents info)
(let* ((title-str (org-export-data (plist-get info :title) info))
2024-10-19 19:09:53 +03:00
(description-str (org-export-data (plist-get info :description) info))
(file-path-str (org-export-data (plist-get info :input-file) info))
(base-directory-str (org-export-data (plist-get info :base-directory) info))
(file-name-str (file-relative-name file-path-str (format " %s/%s" script-directory base-directory-str)))
(img-link-str (format " %s/resources/images/%s.png" my/url file-name-str))
(has-src-blocks (my/org-has-src-blocks-p info)))
2024-06-26 07:55:58 +03:00
(set-text-properties 0 (length title-str) nil title-str)
(set-text-properties 0 (length description-str) nil description-str)
(set-text-properties 0 (length img-link-str) nil img-link-str)
(concat
" & lt;!DOCTYPE html& gt;"
(esxml-to-xml
`(html ((lang . " en" ))
2024-10-19 19:09:53 +03:00
(head ()
(meta ((charset . " utf-8" )))
(meta ((author . " Alex Mikhailov" )))
(meta ((name . " viewport" )
(content . " width=device-width, initial-scale=1, shrink-to-fit=no" )))
(meta ((name . " color-scheme" ) (content . " light dark" )))
(meta ((http-equiv . " content-language" ) (content . " en-us" )))
;; OG block
;; " Personal page with a blog about my technical adventures"
(meta ((name . " description" ) (content . ,description-str)))
(meta ((name . " og:description" ) (content . ,description-str)))
(meta ((name . " twitter:description" ) (content . ,description-str)))
(meta ((name . " og:image" ) (content . ,img-link-str)))
(meta ((name . " twitter:image" ) (content . ,img-link-str)))
(meta ((name . " og:title" ) (content . ,title-str)))
(meta ((name . " twitter:title" ) (content . ,title-str)))
(meta ((name . " twitter:card" ) (content . " summary_large_image" )))
(link ((rel . " icon" ) (type . " image/x-icon" ) (href . " /resources/favicon.ico" )))
(link ((rel . " stylesheet" ) (type . " text/css" ) (href . " /resources/css/pico.sand.min.css" )))
(script ((defer . " true" ) (src . " https://umami.dokutsu.xyz/script.js" ) (data-website-id . " d52d9af1-0c7d-4531-84c6-0b9c2850011f" )) ())
,(when has-src-blocks
`(nil ()
(link ((id . " highlight-theme" ) (rel . " stylesheet" ) (type . " text/css" )))
(script ((src . " https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js" )) ())
(script ((src . " https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/bash.min.js" )) ())
(script ((src . " https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/lisp.min.js" )) ())
(script ((src . " /resources/js/theme-selector.js" )) ())
)
)
(title () ,title-str)
)
(body ()
(main ((class . " container" ))
,(my/header info)
(raw-string ,contents)
,(my/footer info)
)
))
2024-06-26 07:55:58 +03:00
))
))
(org-export-define-derived-backend ' my-html ' html
:translate-alist ' (
2024-10-19 19:09:53 +03:00
(template . my/template)
(src-block . my/src-block)
))
2024-06-26 07:55:58 +03:00
(defun my/publish-to-html (plist filename pub-dir)
" Publish an Org file to HTML using the custom backend."
(org-publish-org-to ' my-html filename " .html" plist pub-dir))
;;
;;Sitemap/RSS
;;
(defun my/format-rss-feed-entry (entry style project)
" Format ENTRY for the RSS feed.
ENTRY is a file name. STYLE is either ' list' or ' tree' .
PROJECT is the current project."
(cond ((not (directory-name-p entry))
2024-10-19 19:09:53 +03:00
(let* ((file (org-publish--expand-file-name entry project))
(title (org-publish-find-title entry project))
(date (format-time-string " %Y-%m-%d" (org-publish-find-date entry project)))
(link (concat (file-name-sans-extension entry) " .html" )))
(with-temp-buffer
(org-mode)
(insert (format " * [[file:%s][%s]]\n" file title))
(org-set-property " RSS_PERMALINK" link)
(org-set-property " RSS_TITLE" title)
(org-set-property " PUBDATE" date)
(let ((first-two-lines (with-temp-buffer
(insert-file-contents file)
(buffer-substring-no-properties
(point-min)
(progn (forward-line 2) (point))))))
(if (string-suffix-p " \n" first-two-lines)
(setq first-two-lines (substring first-two-lines 0 -1)))
(insert first-two-lines))
(goto-char (point-max))
(insert " ..." )
(buffer-string))))
((eq style ' tree)
;; Return only last subdir.
(file-name-nondirectory (directory-file-name entry)))
(t entry)))
2024-06-26 07:55:58 +03:00
(defun my/format-rss-feed (title list)
" Generate RSS feed, as a string.
TITLE is the title of the RSS feed. LIST is an internal
representation for the files to include, as returned by
`org-list-to-lisp' . PROJECT is the current project."
(concat " #+TITLE: " title " \n"
2024-10-19 19:09:53 +03:00
" #+STARTUP: showall \n\n"
(org-list-to-subtree list 1 ' (:icount " " :istart " " ))))
2024-06-26 07:55:58 +03:00
(defun my/publish-to-rss (plist filename pub-dir)
" Publish RSS with PLIST, only when FILENAME is ' rss.org' .
PUB-DIR is when the output will be placed."
(if (equal " rss.org" (file-name-nondirectory filename))
(org-rss-publish-to-rss plist filename pub-dir)))
;;
;;Helpers
;;
(defun my/format-date-subtitle (file project)
" Format the date found in FILE of PROJECT."
(format-time-string " posted on %Y-%m-%d" (org-publish-find-date file project)))
(defun my/pt (var)
" Print the value and type of VAR."
(message " Value: %S, Type: %s" var (type-of var)))
(defun plist-keys (plist)
" Return a list of keys in the property list PLIST."
(let (keys)
(while plist
(setq keys (cons (car plist) keys))
(setq plist (cddr plist)))
(nreverse keys)))
(defvar script-directory
(file-name-directory (or load-file-name buffer-file-name))
" The directory where the current script is located." )
(defun my/org-has-src-blocks-p (info)
" Return t if the Org document represented by INFO has source code blocks."
(org-element-map (plist-get info :parse-tree) ' src-block
(lambda (src-block) t)
nil t))
(defun my/replace-substrings (input-string)
" Replace substrings in INPUT-STRING according to SUBSTITUTION-MAP."
(let ((output-string input-string))
(dolist (pair my/lang-substitution-map)
(let ((old (regexp-quote (car pair)))
2024-10-19 19:09:53 +03:00
(new (cdr pair)))
(setq output-string (replace-regexp-in-string old new output-string))))
2024-06-26 07:55:58 +03:00
output-string))
;;
;;Clear folder with results
;;
(when (file-directory-p my/web-export-path)
(delete-directory my/web-export-path t))
(mkdir my/web-export-path)
;;
;;Main blog configuration
;;
(setq org-publish-project-alist
(list
(list " static"
2024-10-19 19:09:53 +03:00
:base-directory my/blog-src-path
:base-extension " css\\|js\\|png\\|jpg\\|jpeg\\|gif\\|pdf\\|ico\\|txt"
:publishing-directory my/web-export-path
:recursive t
:publishing-function ' org-publish-attachment
)
2024-06-26 07:55:58 +03:00
(list " blog"
2024-10-19 19:09:53 +03:00
:recursive t
:base-directory my/blog-src-path
:publishing-directory my/web-export-path
:publishing-function ' my/publish-to-html
:html-html5-fancy t
:htmlized-source t
:with-author nil
:with-creator t
:with-toc t
:section-numbers nil
:time-stamp-file nil
)
2024-06-26 07:55:58 +03:00
(list " blog-rss"
2024-10-19 19:09:53 +03:00
:author " Alex M"
:email " iam@fidonode.me"
:base-directory my/blog-src-path
:base-extension " org"
:recursive t
:exclude (regexp-opt ' (" rss.org" " index.org" " 404.org" " posts.org" ))
:publishing-function ' my/publish-to-rss
:publishing-directory my/web-export-path
:rss-extension " xml"
:html-link-home my/url
:html-link-use-abs-url t
:html-link-org-files-as-html t
:auto-sitemap t
:sitemap-filename " rss.org"
:sitemap-title " rss"
:sitemap-style ' list
:sitemap-sort-files ' anti-chronologically
:sitemap-function ' my/format-rss-feed
:sitemap-format-entry ' my/format-rss-feed-entry)
2024-06-26 07:55:58 +03:00
))
;; Generate the site output
(org-publish-all t)
(message " Build complete!" )
< / code > < / pre >
< / div >
< / div >
2024-07-05 23:35:19 +03:00
< / main > < footer class = "footer" > < div class = "container" > < hr / > < small > < p > Alex Mikhailov< / p > < p > Built with: < a href = "https://www.gnu.org/software/emacs/" > GNU Emacs< / a > < a href = "https://orgmode.org/" > Org Mode< / a > < a href = "https://picocss.com/" > picocss< / a > < / p > < / small > < / div > < / footer > < / body > < / html >
