From 5ab83c3282b766fce61d547d9bb6f7d5eeaab6da Mon Sep 17 00:00:00 2001 From: Michael Romero Date: Thu, 8 Feb 2018 20:16:23 -0800 Subject: [PATCH] Update syntax highlighting Update the syntax highlighting documentation, config file, and HLJS theme. --- README.md | 30 ++++++++++++------------------ exampleSite/config.toml | 4 +++- layouts/partials/footer.html | 3 ++- layouts/partials/head.html | 6 +++--- static/css/codeblock.css | 36 +++++------------------------------- static/css/highlight.min.css | 2 +- theme.toml | 2 +- 7 files changed, 27 insertions(+), 56 deletions(-) diff --git a/README.md b/README.md index ff1737f..d040236 100644 --- a/README.md +++ b/README.md @@ -18,46 +18,40 @@ This theme is designed to look great on both large-screen and small-screen (mobi ### Syntax highlighting -This theme has support for either Hugo's lightning fast Chroma, or both server side and client side highlighting. +This theme has support for either Hugo's lightning fast Chroma, or both server side and client side highlighting. See [the Hugo docs for more](https://gohugo.io/content-management/syntax-highlighting/). -#### Chroma +#### Chroma - New server side syntax highlighting To enable Chroma, add the following to your site parameters: ``` pygmentsCodeFences = true pygmentsUseClasses = true -[Params] - UseChroma = true ``` -Then, you can use a different style by running: +Then, you can generate a different style by running: ``` -hugo gen chromastyles --style=manni > static/css/syntax.css +hugo gen chromastyles --style=trac > static/css/syntax.css ``` -See [the Hugo docs for more](https://gohugo.io/content-management/syntax-highlighting/). +#### Pygments - Old server side syntax highlighting -#### Server side syntax highlighting - -Use the `highlight` shortcode (with Pygments), -see [the Hugo documentation](http://gohugo.io/extras/highlighting/) for more information. - -To use this feature install Pygments (`pip install Pygments`) and add +To use this feature install Pygments (`pip install Pygments`) and add the following to your site parameters: ``` -pygmentsUseClasses = true +pygmentsStyle = "trac" pygmentsUseClassic = true ``` -to your `config.toml`. +Pygments is mostly compatable with the newer Chroma. It is slower but has some additional theme options. I recommend Chroma over Pygments. -#### Client side syntax highlighting +#### Highlight.js - Client side syntax highlighting -Use triple backticks ( ``` ) or triple tilde ( ~~~ ) around code blocks. +[Params] + useHLJS = true -Client side highlighting does not require pygments to be installed. This currently is only active if you have not selected Chroma, because they don't play well together. +Client side highlighting does not require pygments to be installed. This will use `highlight.min.css` instead of `syntax.css` for highlighting (effectively disabling Chroma). Highlight.js has a wider range of support for languages and themes, and an alternative highlighting engine. ### Disqus support diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 9af1643..998b59a 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -8,7 +8,8 @@ pygmentsStyle = "trac" pygmentsUseClasses = true pygmentsCodeFences = true pygmentsCodefencesGuessSyntax = true -pygmentOptions = "linenos=table" +#pygmentsUseClassic = true +#pygmentOptions = "linenos=inline" #disqusShortname = "XXX" #googleAnalytics = "XXX" @@ -21,6 +22,7 @@ pygmentOptions = "linenos=table" rss = true comments = true readingTime = true + useHLJS = true # gcse = "012345678901234567890:abcdefghijk" # Get your code from google.com/cse. Make sure to go to "Look and Feel" and change Layout to "Full Width" and Theme to "Classic" #[[Params.bigimg]] diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 96fe300..de884a2 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -65,9 +65,10 @@ {{- if .Site.Params.staticman }} {{- end }} -{{- if (not ( .Site.Params.UseChroma )) }} +{{- if .Site.Params.useHLJS }} + {{- end -}} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index f326111..f619f24 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -51,13 +51,13 @@ {{- end -}} - - {{- if (not ( .Site.Params.UseChroma )) }} + {{- if .Site.Params.useHLJS }} {{- else -}} {{- end -}} - + + {{- if .Site.Params.staticman.recaptcha -}} {{- end -}} diff --git a/static/css/codeblock.css b/static/css/codeblock.css index 40bbbbc..36fcdb7 100644 --- a/static/css/codeblock.css +++ b/static/css/codeblock.css @@ -1,35 +1,9 @@ /* --- Code blocks --- */ -pre { - font-size: 16px; - line-height: 1.5em; +.chroma .ln { + margin-right: 0.8em; + padding: 0 0.4em 0 0.4em; } -pre code { - white-space: pre; -} -pre.highlight, .highlight > pre, td.code pre { - background: #FAFAFA; - background-image: linear-gradient(#F9F9F9 50%, #FDFDFD 50%); - background-repeat: repeat; - background-size: 3em 3em; - background-position: 0px 10px; - border-left: 7px solid #444; -} -code table, code table td, code table th, code table tbody, code table tr, -td.gutter pre { - padding: 0; - border: none; - background-color: #fff; -} -.highlight > pre { - padding: 0; -} -td.code pre { - border-width: 0 0 0 2px; - border-style: solid; - border-color: #444; - border-radius: 0; -} -td.gutter { - padding-top: 3px; +pre code.hljs { + padding: 9.5px; } diff --git a/static/css/highlight.min.css b/static/css/highlight.min.css index 77ff6fa..5477a1b 100644 --- a/static/css/highlight.min.css +++ b/static/css/highlight.min.css @@ -1 +1 @@ -.hljs{display:block;overflow-x:auto;padding:0.5em;background:#f9f9f9;-webkit-text-size-adjust:none}.hljs,.hljs-subst,.hljs-tag .hljs-title,.nginx .hljs-title{color:black}.hljs-string,.hljs-title,.hljs-constant,.hljs-parent,.hljs-tag .hljs-value,.hljs-rule .hljs-value,.hljs-preprocessor,.hljs-pragma,.hljs-name,.haml .hljs-symbol,.ruby .hljs-symbol,.ruby .hljs-symbol .hljs-string,.hljs-template_tag,.django .hljs-variable,.smalltalk .hljs-class,.hljs-addition,.hljs-flow,.hljs-stream,.bash .hljs-variable,.pf .hljs-variable,.apache .hljs-tag,.apache .hljs-cbracket,.tex .hljs-command,.tex .hljs-special,.erlang_repl .hljs-function_or_atom,.asciidoc .hljs-header,.markdown .hljs-header,.coffeescript .hljs-attribute{color:#800}.smartquote,.hljs-comment,.hljs-annotation,.diff .hljs-header,.hljs-chunk,.asciidoc .hljs-blockquote,.markdown .hljs-blockquote{color:#888}.hljs-number,.hljs-date,.hljs-regexp,.hljs-literal,.hljs-hexcolor,.smalltalk .hljs-symbol,.smalltalk .hljs-char,.go .hljs-constant,.hljs-change,.lasso .hljs-variable,.makefile .hljs-variable,.asciidoc .hljs-bullet,.markdown .hljs-bullet,.asciidoc .hljs-link_url,.markdown .hljs-link_url{color:#080}.hljs-label,.hljs-javadoc,.ruby .hljs-string,.hljs-decorator,.hljs-filter .hljs-argument,.hljs-localvars,.hljs-array,.hljs-attr_selector,.hljs-important,.hljs-pseudo,.hljs-pi,.haml .hljs-bullet,.hljs-doctype,.hljs-deletion,.hljs-envvar,.hljs-shebang,.apache .hljs-sqbracket,.nginx .hljs-built_in,.tex .hljs-formula,.erlang_repl .hljs-reserved,.hljs-prompt,.asciidoc .hljs-link_label,.markdown .hljs-link_label,.vhdl .hljs-attribute,.clojure .hljs-attribute,.asciidoc .hljs-attribute,.lasso .hljs-attribute,.coffeescript .hljs-property,.hljs-phony{color:#88f}.hljs-keyword,.hljs-id,.hljs-title,.hljs-built_in,.css .hljs-tag,.hljs-javadoctag,.hljs-phpdoc,.hljs-dartdoc,.hljs-yardoctag,.smalltalk .hljs-class,.hljs-winutils,.bash .hljs-variable,.pf .hljs-variable,.apache .hljs-tag,.hljs-type,.hljs-typename,.tex .hljs-command,.asciidoc .hljs-strong,.markdown .hljs-strong,.hljs-request,.hljs-status{font-weight:bold}.asciidoc .hljs-emphasis,.markdown .hljs-emphasis{font-style:italic}.nginx .hljs-built_in{font-weight:normal}.coffeescript .javascript,.javascript .xml,.lasso .markup,.tex .hljs-formula,.xml .javascript,.xml .vbscript,.xml .css,.xml .hljs-cdata{opacity:0.5} +.hljs{display:block;overflow-x:auto;padding:0.5em;color:#333;background:#f8f8f8}.hljs-comment,.hljs-quote{color:#998;font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-subst{color:#333;font-weight:bold}.hljs-number,.hljs-literal,.hljs-variable,.hljs-template-variable,.hljs-tag .hljs-attr{color:#008080}.hljs-string,.hljs-doctag{color:#d14}.hljs-title,.hljs-section,.hljs-selector-id{color:#900;font-weight:bold}.hljs-subst{font-weight:normal}.hljs-type,.hljs-class .hljs-title{color:#458;font-weight:bold}.hljs-tag,.hljs-name,.hljs-attribute{color:#000080;font-weight:normal}.hljs-regexp,.hljs-link{color:#009926}.hljs-symbol,.hljs-bullet{color:#990073}.hljs-built_in,.hljs-builtin-name{color:#0086b3}.hljs-meta{color:#999;font-weight:bold}.hljs-deletion{background:#fdd}.hljs-addition{background:#dfd}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold} \ No newline at end of file diff --git a/theme.toml b/theme.toml index 7ea2c2f..3b446dd 100644 --- a/theme.toml +++ b/theme.toml @@ -4,7 +4,7 @@ licenselink = "https://github.com/halogenica/Hugo-BeautifulHugo/blob/master/LICE description = "A port of Beautiful Jekyll theme" tags = ["blog", "company", "portfolio", "projects", "minimal", "responsive"] features = ["blog", "themes", "disqus", "minimal", "responsive", "staticman"] -min_version = 0.17 +min_version = 0.28 [author] name = "halogenica"