Add code highlighting option

This is a first stab at having a configurable code highlighting option,
similar to the MathJax rendering option. This change makes a checkbox
in the settings for code highlighting using the highlightjs.org
library.
What works: code highlighting in multi-user env is like I would
expect. single and anon(?) needs work

Things to resolve/consider:
- does the .IsCode test for code highlighting need to stay? At least
this and that should use the same version of the highlight.js lib.
- can the common templating part be 'included' somehow?
- the anon vs single-user vs multi-user code is not completely
clear (to me)
- bring js to local instead of cloudfare cdn (perhaps combine with
MathJax)
This commit is contained in:
Marcel van der Boom 2018-11-20 11:29:12 +01:00
parent bdc4f270f8
commit 348d548793
7 changed files with 80 additions and 1 deletions

View File

@ -70,6 +70,7 @@ type (
Privacy int `schema:"privacy" json:"privacy"`
Pass string `schema:"password" json:"password"`
MathJax bool `schema:"mathjax" json:"mathjax"`
Highlight bool `schema:"highlight" json:"highlight"`
Handle string `schema:"handle" json:"handle"`
// Actual collection values updated in the DB
@ -306,6 +307,10 @@ func (c *Collection) RenderMathJax() bool {
return c.db.CollectionHasAttribute(c.ID, "render_mathjax")
}
func (c *Collection) CodeHighlight() bool {
return c.db.CollectionHasAttribute(c.ID, "code_highlight")
}
func newCollection(app *app, w http.ResponseWriter, r *http.Request) error {
reqJSON := IsJSON(r.Header.Get("Content-Type"))
alias := r.FormValue("alias")

View File

@ -800,6 +800,21 @@ func (db *datastore) UpdateCollection(c *SubmittedCollection, alias string) erro
}
}
// Update CodeHighlight value
if c.Highlight {
_, err = db.Exec("INSERT INTO collectionattributes (collection_id, attribute, value) VALUES (?, ?, ?) ON DUPLICATE KEY UPDATE value = ?", collID, "code_highlight", "1", "1")
if err != nil {
log.Error("Unable to insert code_highlight value: %v", err)
return err
}
} else {
_, err = db.Exec("DELETE FROM collectionattributes WHERE collection_id = ? AND attribute = ?", collID, "code_highlight")
if err != nil {
log.Error("Unable to delete code_highlight value: %v", err)
return err
}
}
// Update rest of the collection data
res, err = db.Exec("UPDATE collections SET "+q.Updates+" WHERE "+q.Conditions, q.Params...)
if err != nil {

View File

@ -45,6 +45,19 @@
</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}}
{{if .Collection.CodeHighlight}}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-light.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>
addEventListener('load', function () {
var x = document.querySelectorAll("code[class^='language-']");
for (i=0; i<x.length; i++) {
hljs.highlightBlock(x[i]);
}});
</script>
{{end}}
</head>
<body id="post">

View File

@ -45,6 +45,19 @@
</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}}
{{if .CodeHighlight}}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-light.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>
addEventListener('load', function () {
var x = document.querySelectorAll("code[class^='language-']");
for (i=0; i<x.length; i++) {
hljs.highlightBlock(x[i]);
}});
</script>
{{end}}
</head>
<body id="subpage">

View File

@ -43,6 +43,18 @@
</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}}
{{if .CodeHighlight}}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-light.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>
addEventListener('load', function () {
var x = document.querySelectorAll("code[class^='language-']");
for (i=0; i<x.length; i++) {
hljs.highlightBlock(x[i]);
}});
</script>
{{end}}
</head>
<body id="collection" itemscope itemtype="http://schema.org/WebPage">
{{if or .IsOwner .SingleUser}}<nav id="manage"><ul>
@ -111,7 +123,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

@ -32,6 +32,22 @@
<meta property="og:image" content="https://write.as/img/w-sq-light.png">
{{if .Author}}<meta property="article:author" content="https://{{.Author}}" />{{end}}
<!-- Collection not known during single User draft? this test feels wrong -->
{{if not .SingleUser }}
{{if .Collection.CodeHighlight}}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-light.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>
addEventListener('load', function () {
var x = document.querySelectorAll("code[class^='language-']");
for (i=0; i<x.length; i++) {
hljs.highlightBlock(x[i]);
}});
</script>
{{end}}
{{end}}
</head>
<body id="post">

View File

@ -105,6 +105,11 @@
MathJax
</label>
</li>
<li>
<label><input type="checkbox" name="highlight" {{if .CodeHighlight}}checked="checked"{{end}} />
Syntax highlight source-code
</label>
</li>
</ul>
</div>
</div>