ADD SYNTAX HIGHLIGHTING TO AN ORG-PUBLISH-PROJECT
Add Prism.js dependencies
----------------------------------------------------------------------
Visit and download the JavaScript and CSS files. Move the files into
the respective `css' and `js' asset folders for your org publishing
project.
Now add these dependencies to your org files. The simplest way is to
stick them in the HTML document's head via the `#+HTML_HEAD'
attribute.
,----
| #+html_head: <link rel="stylesheet" type="text/css" href="assets/css/style.css" /><link rel="stylesheet" href="assets/css/prism.css" /><script src="assets/js/prism.js"></script>
`----
Override the default src-block backend
----------------------------------------------------------------------
According to Prism's , the library only works with `code' elements.
Prism does its best to encourage good authoring practices. Therefore,
it only works with <code> elements, since marking up code without a
<code> element is semantically invalid.
By default, org will render source blocks without the HTML `code'
element.
,----
| ;; Exceprted from function org-html-src-block, found in ox-html.el.
| (format "<pre class=\"src src-%s\"%s>%s</pre>"
| lang label code)
`----
That won't do. So let's override the default backend filter for the
`src-block' and change the HTML template. We'll also change the class
to match Prism's recommendations, which is `language-*', where `*' is
the language.
,----
| (defun roygbyte/org-html-src-block (src-block _contents info)
| "Transcode a SRC-BLOCK element from Org to HTML.
| CONTENTS holds the contents of the item. INFO is a plist holding
| contextual information."
| (if (org-export-read-attribute :attr_html src-block :textarea)
| (org-html--textarea-block src-block)
| (let* ((lang (org-element-property :language src-block))
| (code (org-html-format-code src-block info))
| (label (let ((lbl (org-html--reference src-block info t)))
| (if lbl (format " id=\"%s\"" lbl) "")))
| (klipsify (and (plist-get info :html-klipsify-src)
| (member lang '("javascript" "js"
| "ruby" "scheme" "clojure" "php" "html")))))
| (if (not lang) (format "<pre class=\"example\"%s>\n%s</pre>" label code)
| (format "<div class=\"org-src-container\">\n%s%s\n</div>"
| ;; Build caption.
| (let ((caption (org-export-get-caption src-block)))
| (if (not caption) ""
| (let ((listing-number
| (format
| "<span class=\"listing-number\">%s </span>"
| (format
| (org-html--translate "Listing %d:" info)
| (org-export-get-ordinal
| src-block info nil #'org-html--has-caption-p)))))
| (format "<label class=\"org-src-name\">%s%s</label>"
| listing-number
| (org-trim (org-export-data caption info))))))
| ;; Contents.
| ;; Changed HTML template to work with Prism.
| (if klipsify
| (format "<pre><code class=\"src language-%s\"%s%s>%s</code></pre>"
| lang
| label
| (if (string= lang "html")
| " data-editor-type=\"html\""
| "")
| code)
| (format "<pre><code class=\"src language-%s\"%s>%s</code></pre>"
| lang label code)))))))
`----
Next, a new backend that includes the new filter needs to be
defined. According to , we can do that by calling
`org-export-define-derived-backend', specifying the derived backend's
name and the derived backend's parent as the first and second
parametre, and modifying the `:translate-alist' property to include
the new filter.
,----
| (org-export-define-derived-backend 'site-html
| 'html
| :translate-alist
| '((src-block . roygbyte/org-html-src-block)))
`----
Override the default publishing function
----------------------------------------------------------------------
The newly derived backend, `site-html', needs to be used by the
`org-publish-org-to'. So we override `org-html-publish-to-html' to
include reference to the backend.
,----
| (defun roygbyte/org-html-publish-to-html (plist filename pub-dir)
| "Publish an org file to HTML, using the FILENAME as the output directory."
| (org-publish-org-to 'site-html filename
| (concat (when (> (length org-html-extension) 0) ".")
| (or (plist-get plist :html-extension)
| org-html-extension
| "html"))
| plist pub-dir))
`----
Finally, we change the `:publishing-function' property in the
publishing project's `alist' to use the new publishing function.
,----
| (setq org-publish-project-alist
| '(
| ("content"
| :recursive nil
| :exclude ".*dir-locals\.el|.*gitignore|*.gitmodules|rss.org|*.org~|*.html~|*.*~|.*/gtd/.*|.*/dailies/.*"
| :base-directory "./org"
| :publishing-function (roygbyte/org-html-publish-to-html)
| :publishing-directory "./public_html/roygbyte.com"
| :auto-sitemap nil)))
`----
And we're done.