We introduce how to implement simple html syntax highlight using Nim. We use highlight in stdlib to parse syntax. Then we use karax and htmlgen to generate Html.
import module
We need karax which constructs DSL to generate Html file and use htmlgen to generate Html strings.
First you should use command nimble install karax to install karax.
karax can be used as server side rendering and also single page application. To be simple, karax can be used to generate Html and Javascript.
import karax / [karaxdsl, vdom] import packages/docutils/highlite from htmlgen import span from xmltree import escape ## code block const code = """ import hello type TreeObj* = object left*: ref TreeObj right*: ref TreeObj value*: char priority*: float Tree* = ref TreeObj ## escape `>=` if a >= b: echo a + b """ Generate HTML
karax supply text function accepting strings and verbatim function accepting raw Html strings.
We use link CSS to render keywords, comments, symbols, etc.
CSS looks like this.(highlight.css)
span.Keyword { color: blue; font-size: 18px; } span.Operator { color: purple; font-size: 18px; } span.Comment { color: green; font-size: 18px; } List Nim code as below， buildLang function uses stdlib highlight to parse syntax information and generates Html strings.
proc buildPre*(code: string): string = let vnode = buildHtml(tdiv): pre(class = "text"): text code result = $vnode proc buildVerbatimPre*(code: string, lang: string = "lang-Nim"): string = let vnode = buildHtml(tdiv): link(rel="stylesheet", `type`="text/css", href = "highlight.css") pre(class = lang): verbatim code result = $vnode proc buildLang*(code: string): string = var toknizr: GeneralTokenizer initGeneralTokenizer(toknizr, code) while true: getNextToken(toknizr, langNim) case toknizr.kind of gtEof: break of gtNone, gtWhitespace: result.add substr(code, toknizr.start, toknizr.length + toknizr.start - 1) else: result.add span(class=tokenClassToStr[toknizr.kind], escape(substr(code, toknizr.start, toknizr.length + toknizr.start - 1))) proc buildCode*(code: string, lang: string = "Nim"): string = if getSourceLanguage(lang) != langNim: return buildPre(code) buildVerbatimPre(buildLang(code)) Let’s test our results，use openDefaultBrowser to preview.
import browsers let file = "highlight.html" let f = open(file, fmWrite) f.write buildCode(code) f.close() openDefaultBrowser(file) 
Top comments (2)
:)
Nice catch!😄