phoenix/hugo
1
0
Fork 0
mirror of https://github.com/gohugoio/hugo.git synced 2024-07-05 08:42:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adding more information about client side highlighting

Browse source
This commit is contained in:
spf13 2014-05-09 00:03:42 -04:00
parent bc9f69e7c5
commit 9b192e6793
1 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
docs/content/extras/highlighting.md
View file

@ -8,8 +8,12 @@ menu:
--- ---
Hugo provides the ability for you to highlight source code in two different 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 ways — either pre-processed server side from your content, or to defer
processing to the client side, using a JavaScript library. 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.
For the pre-processed approach, Highlighting is performed by an external For the pre-processed approach, Highlighting is performed by an external
python based program called [pygments](http://pygments.org) and is triggered python based program called [pygments](http://pygments.org) and is triggered
@ -21,7 +25,7 @@ silently simply pass the content along unhighlighted.
### Disclaimers ### 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 as optimized as it could be. Expect much longer build times when using server side highlighting.
* Languages available depends on your pygments installation. * Languages available depends on your pygments installation.
* While pygments supports a few different output formats and options we currently * While pygments supports a few different output formats and options we currently
only support output=html, style=monokai, noclasses=true, and encoding=utf-8. only support output=html, style=monokai, noclasses=true, and encoding=utf-8.
@ -31,11 +35,11 @@ to style sheets are not carried over.
limits configuration. An ambitious user is encouraged to extend the current limits configuration. An ambitious user is encouraged to extend the current
functionality to offer more customization. functionality to offer more customization.
## Usage ### Usage
Highlight takes exactly one required parameter of language and requires a Highlight takes exactly one required parameter of language and requires a
closing shortcode. closing shortcode.
## Example ### Example
{{% highlight html %}} {{% highlight html %}}
{{% highlight html %}} {{% highlight html %}}
<section id="main"> <section id="main">
@ -50,7 +54,7 @@ closing shortcode.
{{% /highlight %}} {{% /highlight %}}
## Example Output ### Example Output
{{% highlight html %}} {{% highlight html %}}
<span style="color: #f92672">&lt;section</span> <span style="color: #a6e22e">id=</span><span style="color: #e6db74">&quot;main&quot;</span><span style="color: #f92672">&gt;</span> <span style="color: #f92672">&lt;section</span> <span style="color: #a6e22e">id=</span><span style="color: #e6db74">&quot;main&quot;</span><span style="color: #f92672">&gt;</span>
@ -94,3 +98,5 @@ You can of course use your own copy of these files, typically in `./static/`.
[Google Prettify]: https://code.google.com/p/google-code-prettify/ [Google Prettify]: https://code.google.com/p/google-code-prettify/
[Yandex]: http://yandex.ru/ [Yandex]: http://yandex.ru/
[Highlight.js]: http://highlightjs.org/ [Highlight.js]: http://highlightjs.org/
Please see individual libraries documentation for how to implement the JavaScript based libraries.