Update syntax highlighting page

This commit is contained in:
Ryan Watters committed 2017-02-21 19:51:21 -06:00
1 parent 7b72d6ba0f
commit c8d5a2ba0a
2 files changed
+26 -20

No files matched your search

+1 -1
View File
@@ -5,7 +5,7 @@ description: A list of community-developed tools for migrating from your existin
date: 2017-02-01 date: 2017-02-01
publishdate: 2017-02-01 publishdate: 2017-02-01
lastmod: 2017-02-01 lastmod: 2017-02-01
tags: [migrations,jekyll,wordpress,drupal] tags: [migrations,jekyll,wordpress,drupal,ghost,contentful]
weight: 40 weight: 40
draft: false draft: false
aliases: [/developer-tools/migrations/,/developer-tools/migrated/] aliases: [/developer-tools/migrations/,/developer-tools/migrated/]
+25 -19
View File
@@ -12,19 +12,19 @@ draft: false
slug: slug:
aliases: [/extras/highlighting/,/extras/highlight/] aliases: [/extras/highlighting/,/extras/highlight/]
toc: true toc: true
needsreview: true needsreview:
--- ---
Hugo provides the ability for you to highlight source code in _two different ways_ — either pre-processed server side from your content, or to defer the processing to the client side, using a JavaScript library. Hugo provides the ability for you to highlight source code in _two different ways_—either pre-processed server side from your content or to defer the processing to the client side, using a JavaScript library.
**The advantage of server side** is that it doesn’t depend on a JavaScript library and consequently works very well when read from an RSS feed.
**The advantage of client side** is that it doesn’t cost anything when building your site and some of the highlighting scripts available cover more languages than Pygments does.
## Server-side ## Server-side
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 Hugo shortcode (see example below). If Pygments is absent from 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 Hugo shortcode (see example below). If Pygments is absent from the path, it will silently simply pass the content along unhighlighted.
### Server-side Advantages
The advantages of server-side syntax highlighting are that it doesn’t depend on a JavaScript library and, consequently, works very well when read from an RSS feed.
### Pygments ### Pygments
If you have never worked with Pygments before, here is a brief primer: If you have never worked with Pygments before, here is a brief primer:
@@ -124,6 +124,10 @@ a library and a corresponding theme. Some popular libraries are:
- [Syntax Highlighter] - [Syntax Highlighter]
- [Google Prettify] - [Google Prettify]
### Client-side Advantages
The advantages of client-side syntax highlighting are that it doesn’t cost anything when building your site, and some of the highlighting scripts available cover more languages than Pygments does.
### Highlight.js example ### Highlight.js example
This example uses the popular [Highlight.js] library, hosted by [Yandex], a popular Russian search engine. This example uses the popular [Highlight.js] library, hosted by [Yandex], a popular Russian search engine.
@@ -173,13 +177,25 @@ body {
</pre> </pre>
``` ```
The markup in your content pages (e.g. `my-css-tutorial.md`) needs to look like the following, with the name of the language to be highlighted entered directly after the first "fence", in a fenced code block: The markup in your content pages (e.g. `my-css-tutorial.md`) needs to look like the following, with the name of the language to be highlighted entered directly after the first "fence. A fenced code block can be noted by opening and close triple tilde (`~`) or triple back ticks (```):
<pre><code class="language-css">&#126;&#126;&#126;css ```css
~~~css
body { body {
font-family: "Noto Sans", sans-serif; font-family: "Noto Sans", sans-serif;
} }
&#126;&#126;&#126;</code></pre> ~~~
```
Or with back ticks:
~~~css
```css
body {
font-family: "Noto Sans", sans-serif;
}
```
~~~
When passed through the highlighter script, it would yield something like this output when viewed on your rendered page: When passed through the highlighter script, it would yield something like this output when viewed on your rendered page:
@@ -191,16 +207,6 @@ body {
Please see individual libraries' documentation for how to implement each of the JavaScript-based libraries. Please see individual libraries' documentation for how to implement each of the JavaScript-based libraries.
## Code Blocks in Markdown
## Using Pygments with Hugo
## JavaScript Syntax Highlighters
### Highlight.js
### Prism.js
[Prism]: http://prismjs.com [Prism]: http://prismjs.com
[Highlight.js]: http://highlightjs.org/ [Highlight.js]: http://highlightjs.org/
[Rainbow]: http://craig.is/making/rainbows [Rainbow]: http://craig.is/making/rainbows