Merge pull request #31 from mrvdb/codehighlight

Add code highlighting
This commit is contained in:
Matt Baer 2018-11-23 13:23:50 -05:00 committed by GitHub
commit cf784388f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 86 additions and 55 deletions

View File

@ -49,21 +49,19 @@ func initTemplate(name string) {
log.Info(" %s%s%s.tmpl", templatesDir, string(filepath.Separator), name)
}
files := []string{
filepath.Join(templatesDir, name+".tmpl"),
filepath.Join(templatesDir, "include", "footer.tmpl"),
filepath.Join(templatesDir, "base.tmpl"),
}
if name == "collection" || name == "collection-tags" {
// These pages list out collection posts, so we also parse templatesDir + "include/posts.tmpl"
templates[name] = template.Must(template.New("").Funcs(funcMap).ParseFiles(
filepath.Join(templatesDir, name+".tmpl"),
filepath.Join(templatesDir, "include", "posts.tmpl"),
filepath.Join(templatesDir, "include", "footer.tmpl"),
filepath.Join(templatesDir, "base.tmpl"),
))
} else {
templates[name] = template.Must(template.New("").Funcs(funcMap).ParseFiles(
filepath.Join(templatesDir, name+".tmpl"),
filepath.Join(templatesDir, "include", "footer.tmpl"),
filepath.Join(templatesDir, "base.tmpl"),
))
files = append(files, filepath.Join(templatesDir, "include", "posts.tmpl"))
}
if name == "collection" || name == "collection-tags" || name == "collection-post" || name == "post" {
files = append(files, filepath.Join(templatesDir, "include", "post-render.tmpl"))
}
templates[name] = template.Must(template.New("").Funcs(funcMap).ParseFiles(files...))
}
func initPage(path, key string) {

View File

@ -30,20 +30,14 @@
{{range .Images}}<meta property="og:image" content="{{.}}" />{{else}}<meta property="og:image" content="{{.Collection.AvatarURL}}">{{end}}
<meta property="article:published_time" content="{{.Created8601}}">
{{if .Collection.StyleSheet}}<style type="text/css">{{.Collection.StyleSheetDisplay}}</style>{{end}}
{{if .Collection.RenderMathJax}}
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true
},
"HTML-CSS": { fonts: ["TeX"] }
});
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async></script>{{end}}
<!-- Add mathjax logic -->
{{template "mathjax" . }}
{{end}}
<!-- Add highlighting logic -->
{{template "highlighting" .}}
</head>
<body id="post">

View File

@ -30,20 +30,14 @@
<meta property="og:url" content="{{.CanonicalURL}}tag:{{.Tag}}" />
<meta property="og:image" content="{{.Collection.AvatarURL}}">
{{if .Collection.StyleSheet}}<style type="text/css">{{.Collection.StyleSheetDisplay}}</style>{{end}}
{{if .Collection.RenderMathJax}}
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true
},
"HTML-CSS": { fonts: ["TeX"] }
});
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async></script>{{end}}
<!-- Add mathjax logic -->
{{template "mathjax" .}}
{{end}}
<!-- Add highlighting logic -->
{{template "highlighting" . }}
</head>
<body id="subpage">

View File

@ -28,20 +28,14 @@
<meta property="og:description" content="{{.Description}}" />
<meta property="og:image" content="{{.AvatarURL}}">
{{if .StyleSheet}}<style type="text/css">{{.StyleSheetDisplay}}</style>{{end}}
{{if .RenderMathJax}}
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true
},
"HTML-CSS": { fonts: ["TeX"] }
});
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async></script>{{end}}
<!-- Add mathjax logic -->
{{template "mathjax" .}}
{{end}}
<!-- Add highlighting logic -->
{{template "highlighting" . }}
</head>
<body id="collection" itemscope itemtype="http://schema.org/WebPage">
@ -111,7 +105,7 @@
</footer>
{{ end }}
</body>
{{if .CanShowScript}}
{{range .ExternalScripts}}<script type="text/javascript" src="{{.}}" async></script>{{end}}
{{if .Script}}<script type="text/javascript">{{.ScriptDisplay}}</script>{{end}}

View File

@ -0,0 +1,50 @@
<!-- Miscelaneous render related template parts we use multiple times -->
{{define "highlighting"}}
<script>
// TODO: this feels more like a mutation observer
addEventListener('DOMContentLoaded', function () {
var hlbaseUri = "//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/";
var x = document.querySelectorAll("code[class^='language-']");
if (x.length > 0) {
// We have blocks to be highlighted, so we load css + js
var st = document.createElement('link');
st.rel = "stylesheet";
st.href = hlbaseUri + "styles/atom-one-light.min.css";
document.getElementsByTagName('head')[0].appendChild(st);
var sc = document.createElement('script');
sc.type = "text/javascript";
sc.src = hlbaseUri + "highlight.min.js";
sc.async = true;
// Here's the crux, we need to react on load event for this new element to make it work.
sc.onload = () => { highlight(x) }
document.getElementsByTagName('head')[0].appendChild(sc);
// Given a set of nodes, run highlighting on them
function highlight(nodes) {
for (i=0; i < nodes.length; i++) {
hljs.highlightBlock(nodes[i]);
}
}
}
});
</script>
{{end}}
<!-- Include mathjax configuration -->
{{define "mathjax"}}
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true
},
"HTML-CSS": { fonts: ["TeX"] }
});
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async></script>
{{end}}

View File

@ -6,7 +6,7 @@
<title>{{if .Title}}{{.Title}}{{else}}{{.GenTitle}}{{end}} &mdash; {{.SiteName}}</title>
{{if .IsCode}}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/mono-blue.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/mono-blue.min.css">
{{end}}
<link rel="stylesheet" type="text/css" href="/css/write.css" />
<link rel="shortcut icon" href="/favicon.ico" />
@ -31,7 +31,8 @@
<meta property="og:description" content="{{.Description}}" />
<meta property="og:image" content="https://write.as/img/w-sq-light.png">
{{if .Author}}<meta property="article:author" content="https://{{.Author}}" />{{end}}
<!-- Add highlighting logic -->
{{template "highlighting" .}}
</head>
<body id="post">
@ -55,7 +56,7 @@
</body>
{{if .IsCode}}
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>
hljs.highlightBlock(document.getElementById('post-body'));
</script>