mirror of
https://github.com/tiennm99/hugoDocs.git
synced 2026-10-13 20:14:58 +00:00
Update syntax highlighting page
This commit is contained in:
1 parent
7b72d6ba0f
commit
c8d5a2ba0a
2 files changed
+26
-20
No files matched your search
@@ -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/]
|
||||||
|
|||||||
@@ -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">~~~css
|
```css
|
||||||
|
~~~css
|
||||||
body {
|
body {
|
||||||
font-family: "Noto Sans", sans-serif;
|
font-family: "Noto Sans", sans-serif;
|
||||||
}
|
}
|
||||||
~~~</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
|
||||||
|
|||||||
Reference in new issue
Block a user