Permalink
Browse files

Update syntax highlighting

Update the syntax highlighting documentation, config file, and HLJS
theme.
  • Loading branch information...
halogenica committed Feb 9, 2018
1 parent b2ea7d9 commit 5ab83c3282b766fce61d547d9bb6f7d5eeaab6da
Showing with 27 additions and 56 deletions.
  1. +12 −18 README.md
  2. +3 −1 exampleSite/config.toml
  3. +2 −1 layouts/partials/footer.html
  4. +3 −3 layouts/partials/head.html
  5. +5 −31 static/css/codeblock.css
  6. +1 −1 static/css/highlight.min.css
  7. +1 −1 theme.toml
View
@@ -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/).
#### Server side syntax highlighting
Use the `highlight` shortcode (with Pygments),
see [the Hugo documentation](http://gohugo.io/extras/highlighting/) for more information.
#### Pygments - Old server side syntax highlighting
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
View
@@ -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]]
@@ -65,9 +65,10 @@
{{- if .Site.Params.staticman }}
<script src="{{ "js/staticman.js" | absURL }}"></script>
{{- end }}
{{- if (not ( .Site.Params.UseChroma )) }}
{{- if .Site.Params.useHLJS }}
<script src="{{ "js/highlight.min.js" | absURL }}"></script>
<script> hljs.initHighlightingOnLoad(); </script>
<script> $(document).ready(function() {$("pre.chroma").css("padding","0");}); </script>
{{- end -}}
<script> renderMathInElement(document.body); </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js" integrity="sha256-UplRCs9v4KXVJvVY+p+RSo5Q4ilAUXh7kpjyIP5odyc=" crossorigin="anonymous"></script>
@@ -51,13 +51,13 @@
{{- end -}}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" />
<link rel="stylesheet" href="{{ "css/codeblock.css" | absURL }}" />
{{- if (not ( .Site.Params.UseChroma )) }}
{{- if .Site.Params.useHLJS }}
<link rel="stylesheet" href="{{ "css/highlight.min.css" | absURL }}" />
{{- else -}}
<link rel="stylesheet" href="{{ "css/syntax.css" | absURL }}" />
{{- end -}}
<link rel="stylesheet" href="{{ "css/codeblock.css" | absURL }}" />
{{- if .Site.Params.staticman.recaptcha -}}
<script src='https://www.google.com/recaptcha/api.js'></script>
{{- end -}}
View
@@ -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;
}

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -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"

0 comments on commit 5ab83c3

Please sign in to comment.