Merge pull request #94 from badele/highlighting
Add chroma highlighting support (Hugo now uses it)
This commit is contained in:
Michael Romero
GitHub
commit
4f7b301f56
32
README.md
32
README.md
@ -18,20 +18,46 @@ This theme is designed to look great on both large-screen and small-screen (mobi
|
||||
|
||||
### Syntax highlighting
|
||||
|
||||
This theme has support for 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.
|
||||
|
||||
#### Chroma
|
||||
|
||||
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:
|
||||
|
||||
```
|
||||
hugo gen chromastyles --style=manni > 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.
|
||||
|
||||
To use this feature install Pygments (`pip install Pygments`) and add `pygmentsuseclasses = true` to your `config.toml`.
|
||||
To use this feature install Pygments (`pip install Pygments`) and add
|
||||
|
||||
```
|
||||
pygmentsUseClasses = true
|
||||
pygmentsUseClassic = true
|
||||
```
|
||||
|
||||
to your `config.toml`.
|
||||
|
||||
#### Client side syntax highlighting
|
||||
|
||||
Use triple backticks ( ``` ) or triple tilde ( ~~~ ) around code blocks.
|
||||
|
||||
Client side highlighting does not require pygments to be installed.
|
||||
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.
|
||||
|
||||
### Disqus support
|
||||
|
||||
|
||||
@ -58,8 +58,10 @@
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
||||
<script src="{{ "js/main.js" | absURL }}"></script>
|
||||
{{- if (not ( .Site.Params.UseChroma )) }}
|
||||
<script src="{{ "js/highlight.min.js" | absURL }}"></script>
|
||||
<script> hljs.initHighlightingOnLoad(); </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>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js" integrity="sha256-PWHOlUzc96pMc8ThwRIXPn8yH4NOLu42RQ0b9SpnpFk=" crossorigin="anonymous"></script>
|
||||
|
||||
@ -44,8 +44,14 @@
|
||||
<link rel="stylesheet" href="{{ "css/main.css" | absURL }}" />
|
||||
<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" />
|
||||
{{- if (not ( .Site.Params.UseChroma )) }}
|
||||
<link rel="stylesheet" href="{{ "css/highlighting.css" | absURL }}" />
|
||||
<link rel="stylesheet" href="{{ "css/pygment_highlights.css" | absURL }}" />
|
||||
<link rel="stylesheet" href="{{ "css/highlight.min.css" | absURL }}" />
|
||||
{{- else -}}
|
||||
<link rel="stylesheet" href="{{ "css/syntax.css" | absURL }}" />
|
||||
{{- end -}}
|
||||
|
||||
{{- partial "head_custom.html" . }}
|
||||
{{- partial "load-photoswipe-theme.html" . }}
|
||||
{{ template "_internal/google_analytics_async.html" . }}
|
||||
|
||||
35
static/css/highlighting.css
Normal file
35
static/css/highlighting.css
Normal file
@ -0,0 +1,35 @@
|
||||
/* --- Code blocks --- */
|
||||
|
||||
pre {
|
||||
font-size: 16px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
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;
|
||||
}
|
||||
@ -656,42 +656,6 @@ table tr td :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* --- Code blocks --- */
|
||||
|
||||
pre {
|
||||
font-size: 16px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
/* --- Social media sharing section --- */
|
||||
|
||||
#social-share-section {
|
||||
|
||||
59
syntax.css
Normal file
59
syntax.css
Normal file
@ -0,0 +1,59 @@
|
||||
/* Background */ .chroma { color: #f8f8f2; background-color: #272822 }
|
||||
/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
|
||||
/* LineTableTD */ .chroma .lntd { ; vertical-align: top; padding: 0; margin: 0; border: 0; }
|
||||
/* LineTable */ .chroma .lntable { ; border-spacing: 0; padding: 0; margin: 0; border: 0; width: 100%; overflow: auto; display: block; }
|
||||
/* LineHighlight */ .chroma .hl { background-color: #ffffcc; display: block; width: 100% }
|
||||
/* LineNumbersTable */ .chroma .lnt { ; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; display: block; }
|
||||
/* LineNumbers */ .chroma .ln { ; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
|
||||
/* Keyword */ .chroma .k { color: #66d9ef }
|
||||
/* KeywordConstant */ .chroma .kc { color: #66d9ef }
|
||||
/* KeywordDeclaration */ .chroma .kd { color: #66d9ef }
|
||||
/* KeywordNamespace */ .chroma .kn { color: #f92672 }
|
||||
/* KeywordPseudo */ .chroma .kp { color: #66d9ef }
|
||||
/* KeywordReserved */ .chroma .kr { color: #66d9ef }
|
||||
/* KeywordType */ .chroma .kt { color: #66d9ef }
|
||||
/* NameAttribute */ .chroma .na { color: #a6e22e }
|
||||
/* NameClass */ .chroma .nc { color: #a6e22e }
|
||||
/* NameConstant */ .chroma .no { color: #66d9ef }
|
||||
/* NameDecorator */ .chroma .nd { color: #a6e22e }
|
||||
/* NameException */ .chroma .ne { color: #a6e22e }
|
||||
/* NameFunction */ .chroma .nf { color: #a6e22e }
|
||||
/* NameOther */ .chroma .nx { color: #a6e22e }
|
||||
/* NameTag */ .chroma .nt { color: #f92672 }
|
||||
/* Literal */ .chroma .l { color: #ae81ff }
|
||||
/* LiteralDate */ .chroma .ld { color: #e6db74 }
|
||||
/* LiteralString */ .chroma .s { color: #e6db74 }
|
||||
/* LiteralStringAffix */ .chroma .sa { color: #e6db74 }
|
||||
/* LiteralStringBacktick */ .chroma .sb { color: #e6db74 }
|
||||
/* LiteralStringChar */ .chroma .sc { color: #e6db74 }
|
||||
/* LiteralStringDelimiter */ .chroma .dl { color: #e6db74 }
|
||||
/* LiteralStringDoc */ .chroma .sd { color: #e6db74 }
|
||||
/* LiteralStringDouble */ .chroma .s2 { color: #e6db74 }
|
||||
/* LiteralStringEscape */ .chroma .se { color: #ae81ff }
|
||||
/* LiteralStringHeredoc */ .chroma .sh { color: #e6db74 }
|
||||
/* LiteralStringInterpol */ .chroma .si { color: #e6db74 }
|
||||
/* LiteralStringOther */ .chroma .sx { color: #e6db74 }
|
||||
/* LiteralStringRegex */ .chroma .sr { color: #e6db74 }
|
||||
/* LiteralStringSingle */ .chroma .s1 { color: #e6db74 }
|
||||
/* LiteralStringSymbol */ .chroma .ss { color: #e6db74 }
|
||||
/* LiteralNumber */ .chroma .m { color: #ae81ff }
|
||||
/* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
|
||||
/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
|
||||
/* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
|
||||
/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
|
||||
/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
|
||||
/* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
|
||||
/* Operator */ .chroma .o { color: #f92672 }
|
||||
/* OperatorWord */ .chroma .ow { color: #f92672 }
|
||||
/* Comment */ .chroma .c { color: #75715e }
|
||||
/* CommentHashbang */ .chroma .ch { color: #75715e }
|
||||
/* CommentMultiline */ .chroma .cm { color: #75715e }
|
||||
/* CommentSingle */ .chroma .c1 { color: #75715e }
|
||||
/* CommentSpecial */ .chroma .cs { color: #75715e }
|
||||
/* CommentPreproc */ .chroma .cp { color: #75715e }
|
||||
/* CommentPreprocFile */ .chroma .cpf { color: #75715e }
|
||||
/* GenericDeleted */ .chroma .gd { color: #f92672 }
|
||||
/* GenericEmph */ .chroma .ge { font-style: italic }
|
||||
/* GenericInserted */ .chroma .gi { color: #a6e22e }
|
||||
/* GenericStrong */ .chroma .gs { font-weight: bold }
|
||||
/* GenericSubheading */ .chroma .gu { color: #75715e }
|
||||
Loading…
x
Reference in New Issue
Block a user