[V2] Render markdown syntax highlighting

Help
1

So i am using templates to render markdown pages, only issue i have encountered is code blocks like this

for i := 0; i < len(found); i++ {
	busid := found[i]
	if !(busid == "1-1.1" || busid == "1-1.2") {
		//fmt.Println("BUSID:", busid)
		usbBind(busid)
	}
}

Are not syntax highlighted, instead the generated HTML is as follows

<pre class="chroma">
<span class="k">for</span>
<span class="nx">i</span> 
<span class="o">:=</span> 
<span class="mi">0</span>
<span class="p">;</span> 
<span class="nx">i</span> 
<span class="p">&lt;</span> 
<span class="nb">len</span>
<span class="p">(</span>
<span class="nx">found</span>
<span class="p">);</span> 
<span class="nx">i</span>
<span class="o">++</span> 
<span class="p">{</span>
<span class="nx">busid</span> 
<span class="o">:=</span> 
<span class="nx">found</span>
<span class="p">[</span>
<span class="nx">i</span>
<span class="p">]</span>
<span class="k">if</span>
<span class="p">!(</span>
<span class="nx">busid</span> 
<span class="o">==</span> 
<span class="s">"1-1.1"</span> 
<span class="o">||</span> 
<span class="nx">busid</span> 
<span class="o">==</span> 
<span class="s">"1-1.2"</span>
<span class="p">)</span> 
<span class="p">{</span>
<span class="c1">//fmt.Println("BUSID:", busid)</span>
<span class="c1"></span>
<span class="nf">usbBind</span>
<span class="p">(</span>
<span class="nx">busid</span>
<span class="p">)</span>
<span class="p">}</span>
<span class="p">}</span>
</pre>

mean while things written with single backticks like this text here, simply are in <code></code> blocks


I am willing to deal with how it renders this, if it gave syntax highlighting, this is my html for the template file itself

{{$markdownFilePath := printf .OriginalReq.URL.Path}}
{{$markdownFile := (include $markdownFilePath | splitFrontMatter)}}
<!doctype html>
<html>
	<head>
	<title> Merith.TK - markdown </title>
		<meta charset="utf-8" />
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<style type="text/css">
			body {
				background-color: rgb(0, 0, 0);
				margin: 0;
				padding: 0;
				font-family: "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
			}
			img {
				max-width: 700px
			}
			div {
				color: #d8d8d8;
				width: 700px;
				margin: 5em auto;
				padding: 2em;
				background-color: rgb(70, 70, 70);
				border-radius: 0.5em;
				box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);
			}
			a:link, a:visited {
				color: #808080;
				text-decoration: none;
			}
			@media (max-width: 700px) {
				div {
					margin: 0 auto;
					width: auto;
				}
			}
			@media (max-width: 700px) {
				div {
					margin: 0 auto;
					width: auto;
				}
			}
		</style>
	</head>
	<body>
		<div>
			{{markdown $markdownFile.Body}}
		</div>
	</body>
</html>
2

For syntax highlighting you need to bring your own CSS that does it.

Caddy uses Chroma to do the lexing of code blocks. Chroma uses the same styles as Pygments which is another lib, so any styles that work with that will do.

This repo has plenty of CSS styles you could use as a starting point. You’ll need to dig further if those aren’t to your liking.

The Caddy website uses a modified version of Solarized which was taken from some random Github gist. You can find it in here and that might be just what you need, but it depends on your site’s theme.

1 Like
3

This topic was automatically closed after 30 days. New replies are no longer allowed.