Update syntax highlighting page

This commit is contained in:
Ryan Watters
2017-02-21 19:51:21 -06:00
parent 7b72d6ba0f
commit c8d5a2ba0a
2 changed files with 26 additions and 20 deletions
+1 -1
View File
@@ -5,7 +5,7 @@ description: A list of community-developed tools for migrating from your existin
date: 2017-02-01
publishdate: 2017-02-01
lastmod: 2017-02-01
tags: [migrations,jekyll,wordpress,drupal]
tags: [migrations,jekyll,wordpress,drupal,ghost,contentful]
weight: 40
draft: false
aliases: [/developer-tools/migrations/,/developer-tools/migrated/]
+25 -19
View File
@@ -12,19 +12,19 @@ draft: false
slug:
aliases: [/extras/highlighting/,/extras/highlight/]
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.
**The advantage of server side** is that it doesnt depend on a JavaScript library and consequently works very well when read from an RSS feed.
**The advantage of client side** is that it doesnt cost anything when building your site and some of the highlighting scripts available cover more languages than Pygments does.
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.
## 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.
### Server-side Advantages
The advantages of server-side syntax highlighting are that it doesnt depend on a JavaScript library and, consequently, works very well when read from an RSS feed.
### Pygments
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]
- [Google Prettify]
### Client-side Advantages
The advantages of client-side syntax highlighting are that it doesnt cost anything when building your site, and some of the highlighting scripts available cover more languages than Pygments does.
### Highlight.js example
This example uses the popular [Highlight.js] library, hosted by [Yandex], a popular Russian search engine.
@@ -173,13 +177,25 @@ body {
</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 {
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:
@@ -191,16 +207,6 @@ body {
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
[Highlight.js]: http://highlightjs.org/
[Rainbow]: http://craig.is/making/rainbows