mirror of
https://github.com/gohugoio/hugo.git
synced 2024-11-07 20:30:36 -05:00
Add client-side syntax highlighting example
This commit is contained in:
parent
6b9d4a93da
commit
bc9f69e7c5
1 changed files with 41 additions and 5 deletions
|
@ -7,13 +7,18 @@ menu:
|
||||||
parent: 'extras'
|
parent: 'extras'
|
||||||
---
|
---
|
||||||
|
|
||||||
Hugo provides the ability for you to highlight source code from within your
|
Hugo provides the ability for you to highlight source code in two different
|
||||||
content. Highlighting is performed by an external python based program called
|
ways — either pre-processed server side from your content, or to defer the
|
||||||
[pygments](http://pygments.org) and is triggered via an embedded shortcode. If pygments is absent from
|
processing to the client side, using a JavaScript library.
|
||||||
the path, it will silently simply pass the content along unhighlighted.
|
|
||||||
|
|
||||||
|
For the pre-processed approach, Highlighting is performed by an external
|
||||||
|
python based program called [pygments](http://pygments.org) and is triggered
|
||||||
|
via an embedded shortcode. If pygments is absent from the path, it will
|
||||||
|
silently simply pass the content along unhighlighted.
|
||||||
|
|
||||||
## Disclaimers
|
## Server Side
|
||||||
|
|
||||||
|
### Disclaimers
|
||||||
|
|
||||||
* **Warning** pygments is relatively slow and our integration isn't
|
* **Warning** pygments is relatively slow and our integration isn't
|
||||||
speed optimized. Expect much longer build times when using highlighting
|
speed optimized. Expect much longer build times when using highlighting
|
||||||
|
@ -58,3 +63,34 @@ closing shortcode.
|
||||||
<span style="color: #f92672"></section></span>
|
<span style="color: #f92672"></section></span>
|
||||||
{{% /highlight %}}
|
{{% /highlight %}}
|
||||||
|
|
||||||
|
## Client-side
|
||||||
|
|
||||||
|
Alternatively, code highlighting can be done in client-side JavaScript.
|
||||||
|
|
||||||
|
Client-side syntax highlighting is very simple to add. You'll need to pick
|
||||||
|
a library and a corresponding theme. Some popular libraries are:
|
||||||
|
|
||||||
|
- [Rainbow]
|
||||||
|
- [Syntax Highlighter]
|
||||||
|
- [Google Prettify]
|
||||||
|
- [Highlight.js]
|
||||||
|
|
||||||
|
This example uses the popular [Highlight.js] library, hosted by [Yandex], a
|
||||||
|
popular Russian search engine.
|
||||||
|
|
||||||
|
In your `./layouts/chrome/` folder, depending on your specific theme, there
|
||||||
|
will be a snippet that will be included in every generated HTML page, such
|
||||||
|
as `header.html` or `header.includes.html`. Simply add:
|
||||||
|
|
||||||
|
{{% highlight html %}}
|
||||||
|
<link rel="stylesheet" href="https://yandex.st/highlightjs/8.0/styles/default.min.css">
|
||||||
|
<script src="https://yandex.st/highlightjs/8.0/highlight.min.js"></script>
|
||||||
|
{{% /highlight %}}
|
||||||
|
|
||||||
|
You can of course use your own copy of these files, typically in `./static/`.
|
||||||
|
|
||||||
|
[Rainbow]: http://craig.is/making/rainbows
|
||||||
|
[Syntax Highlighter]: http://alexgorbatchev.com/SyntaxHighlighter/
|
||||||
|
[Google Prettify]: https://code.google.com/p/google-code-prettify/
|
||||||
|
[Yandex]: http://yandex.ru/
|
||||||
|
[Highlight.js]: http://highlightjs.org/
|
||||||
|
|
Loading…
Reference in a new issue