{"componentChunkName":"component---src-templates-post-template-js","path":"/note-pandoc-and-prismjs-en","result":{"data":{"markdownRemark":{"id":"6ccf523a-cc87-51fe-821d-d6db7464918b","html":"
\n

This page has been machine-translated from the original page.

\n
\n\n

Table of Contents

\n\n\n

Introduction

\n

In this post, I summarize how to solve the issue where the classes on code blocks in HTML generated from Markdown with the OSS tool Pandoc are not compatible with Prism.js syntax highlighting.

\n

For example, suppose you create HTML with Pandoc from Markdown that contains a code block like the following.

\n
``` python\nSource code
\n
Then HTML with classes like the following is generated.\n\n``` html\n<pre class=\"sourceCode python\">\n  <code class=\"sourceCode python\">\n  ...\n  </code>\n</pre>
\n

However, Prism.js requires classes in the form language-python, so this output cannot be used as-is.

\n

After checking the following Pandoc issue, it seems that this cannot be resolved under Pandoc’s current behavior.

\n

Update 

 to HTML5 
 · Issue #3858 · jgm/pandoc · GitHub
\n
So this time, I used a Lua script that extends Pandoc to solve the problem.
\n
Fixing Pandoc HTML Conversion with a Lua Script
\n
The Lua script I used as reference is provided under the MIT license in the following repository.
\n
GitHub - a-vrma/pandoc-filters: A small, useful collection of pandoc filters
\n
Specifically, it is the following script.
\n
--- standard-code: ouput code blocks with class=\"language-*\" attributes\n-- © 2020 Aman Verma. Distributed under the MIT license.\n\nlocal languages = {meta = true,markup = true,css = true,clike = true,javascript = true,abap = true,abnf = true,actionscript = true,ada = true,agda = true,al = true,antlr4 = true,apacheconf = true,apl = true,applescript = true,aql = true,arduino = true,arff = true,asciidoc = true,aspnet = true,asm6502 = true,autohotkey = true,autoit = true,bash = true,basic = true,batch = true,bbcode = true,bison = true,bnf = true,brainfuck = true,brightscript = true,bro = true,bsl = true,c = true,csharp = true,cpp = true,cil = true,clojure = true,cmake = true,coffeescript = true,concurnas = true,csp = true,crystal = true,['css-extras'] = true,cypher = true,d = true,dart = true,dax = true,dhall = true,diff = true,django = true,['dns-zone-file'] = true,docker = true,ebnf = true,editorconfig = true,eiffel = true,ejs = true,elixir = true,elm = true,etlua = true,erb = true,erlang = true,['excel-formula'] = true,fsharp = true,factor = true,['firestore-security-rules'] = true,flow = true,fortran = true,ftl = true,gml = true,gcode = true,gdscript = true,gedcom = true,gherkin = true,git = true,glsl = true,go = true,graphql = true,groovy = true,haml = true,html = true,handlebars = true,haskell = true,haxe = true,hcl = true,hlsl = true,http = true,hpkp = true,hsts = true,ichigojam = true,icon = true,ignore = true,inform7 = true,ini = true,io = true,j = true,java = true,javadoc = true,javadoclike = true,javastacktrace = true,jolie = true,jq = true,jsdoc = true,['js-extras'] = true,json = true,json5 = true,jsonp = true,jsstacktrace = true,['js-templates'] = true,julia = true,keyman = true,kotlin = true,latex = true,latte = true,less = true,lilypond = true,liquid = true,lisp = true,livescript = true,llvm = true,lolcode = true,lua = true,makefile = true,markdown = true,['markup-templating'] = true,matlab = true,mel = true,mizar = true,mongodb = true,monkey = true,moonscript = true,n1ql = true,n4js = true,['nand2tetris-hdl'] = true,naniscript = true,nasm = true,neon = true,nginx = true,nim = true,nix = true,nsis = true,objectivec = true,ocaml = true,opencl = true,oz = true,parigp = true,parser = true,pascal = true,pascaligo = true,pcaxis = true,peoplecode = true,perl = true,php = true,phpdoc = true,['php-extras'] = true,plsql = true,powerquery = true,powershell = true,processing = true,prolog = true,properties = true,protobuf = true,pug = true,puppet = true,pure = true,purebasic = true,purescript = true,python = true,q = true,qml = true,qore = true,r = true,racket = true,jsx = true,tsx = true,reason = true,regex = true,renpy = true,rest = true,rip = true,roboconf = true,robotframework = true,ruby = true,rust = true,sas = true,sass = true,scss = true,scala = true,scheme = true,['shell-session'] = true,smali = true,smalltalk = true,smarty = true,solidity = true,['solution-file'] = true,soy = true,sparql = true,['splunk-spl'] = true,sqf = true,sql = true,stan = true,iecst = true,stylus = true,swift = true,['t4-templating'] = true,['t4-cs'] = true,['t4-vb'] = true,tap = true,tcl = true,tt2 = true,textile = true,toml = true,turtle = true,twig = true,typescript = true,typoscript = true,unrealscript = true,vala = true,vbnet = true,velocity = true,verilog = true,vhdl = true,vim = true,['visual-basic'] = true,warpscript = true,wasm = true,wiki = true,xeora = true,['xml-doc'] = true,xojo = true,xquery = true,yaml = true,yang = true,zig = true}\n\n\nlocal function escape(s)\n  -- Escape according to HTML 5 rules\n  return s:gsub(\n    [=[[<>&\"']]=],\n    function(x)\n      if x == '<' then\n        return '&lt;'\n      elseif x == '>' then\n        return '&gt;'\n      elseif x == '&' then\n        return '&amp;'\n      elseif x == '\"' then\n        return '&quot;'\n      elseif x == \"'\" then\n        return '&#39;'\n      else\n        return x\n      end\n    end\n  )\nend\n\nlocal function getCodeClass(classes)\n  -- Check if the first element of classes (pandoc.CodeBlock.classes) matches a\n  -- programming language name. If it does, it gets removed from classes and a valid\n  -- HTML class attribute string (with space at beginning) is returned.\n\n  if languages[classes[1]] then\n    return ' class=\"language-' .. table.remove(classes, 1) .. '\"'\n  else\n    return ''\n  end\nend\n\nlocal function makeIdentifier(ident)\n  -- Returns a valid HTML id attribute (with space at beginning) OR empty string.\n\n  if #ident ~= 0 then\n    return ' id=\"'.. ident .. '\"'\n  else\n    return ''\n  end\nend\n\nlocal function makeClasses(classes)\n  -- Returns a valid HTML class attribute with classes separated by spaces (with a space\n  -- at the beginning) OR empty string.\n\n  if #classes ~= 0 then\n    return ' class=\"' .. table.concat(classes, ' ') .. '\"'\n  else\n    return ''\n  end\nend\n\nreturn {\n  {\n    CodeBlock = function(elem)\n      if FORMAT ~= 'html' then\n        return nil\n      end\n\n      id = makeIdentifier(elem.identifier)\n      classLang = getCodeClass(elem.classes)\n      classReg = makeClasses(elem.classes)\n\n      local preCode = string.format(\n        '<pre%s%s><code%s>%s</code></pre>', id, classReg, classLang, escape(elem.text)\n      )\n      return pandoc.RawBlock('html', preCode, 'RawBlock')\n    end,\n\n  }\n}
\n
I saved this script with the name standard_code.lua.
\n
In my environment, Pandoc runs inside a Docker container, so I executed the following command to use the Lua script.
\n
docker run --rm --volume \"`pwd`:/data\" --user `id -u`:`id -g` pandoc/core --lua-filter /data/standard_code.lua /data/sample.md -o /data/sample.html
\n
This made it possible to generate HTML with code blocks that can use Prism.js syntax highlighting.
\n
Summary
\n
You could achieve the same thing by parsing a normally generated HTML file with a regular expression, but since I had the chance, I tried using a Pandoc filter as a learning exercise.
","fields":{"slug":"/note-pandoc-and-prismjs-en","tagSlugs":["/tag/notes/","/tag/pandoc/","/tag/memo/","/tag/english/"]},"frontmatter":{"date":"2021-06-27","description":"","tags":["Notes","Pandoc","Memo","English"],"title":"A Neat Way to Make HTML Code Blocks Generated by Pandoc Compatible with prism.js Syntax Highlighting","socialImage":{"publicURL":"/static/dc4d8b7f8795f3c3d3489d9957d155f2/no-image.png"}}}},"pageContext":{"slug":"/note-pandoc-and-prismjs-en"}},"staticQueryHashes":["251939775","401334301","825871152"]}