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)
6 years ago · 348d548793
parent bdc4f270f8
commit 348d548793
7 changed files with 80 additions and 1 deletions
--- a/collections.go
+++ b/collections.go
@ -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")
--- a/database.go
+++ b/database.go
@ -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 {
--- a/templates/collection-post.tmpl
+++ b/templates/collection-post.tmpl
@ -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">
 		
--- a/templates/collection-tags.tmpl
+++ b/templates/collection-tags.tmpl
@ -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">
 		
--- a/templates/collection.tmpl
+++ b/templates/collection.tmpl
@ -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}}
--- a/templates/post.tmpl
+++ b/templates/post.tmpl
@ -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">

--- a/templates/user/collection.tmpl
+++ b/templates/user/collection.tmpl
@ -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>