Syntax Highlighting

Feb 8, 2017

Syntax highlighting works out-of-the-box via Hugo. Set the highlighter style in config.toml:

pygmentsstyle = "<style>"

For dark highlighter themes, you should rebuild capsule CSS with build/extra/syntax.sass. Uncomment it from the capsule.sass file and run gulp.

Without that file, the background color will default to Bulma’s light background-color, and light colored elements meant to be displayed against dark backgrounds from dark themes will be hard to read.

Use ``` braces to add code blocks. To set a language-specific highlighter, add ```language to the opening brace, e.g.:

```html
<section id="main">
  <div>
    <h1 id="title">Exercitation ullamco laboris</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
      occaecat cupidatat non proident, sunt in culpa qui officia deserunt
      mollit anim id est laborum.
    </p>
  </div>
</section>
```

Note that for the above to work, you also need to set in the config.toml file:

PygmentsCodeFences = true

Examples

A gallery of available pygments styles is available here. Below are a few examples of available syntax highlighters, using the tango style.

C++

#include <iostream>
#include <cmath>

int good_log_2(int i) {
  int m=0;
  while (i>1) {
    m++;
    i=i>>1;
  }
  return m;
}

double bad_log_2(int i) {
  double inv_log_2=1.0/std::log(2.0);
  return std::log((double)i)*inv_log_2;
}

int main()
{
  for (int i=1;i<=1024;i*=2) {
    double bad_d=bad_log_2(i);
    int bad=(int)(bad_d);
    int good=good_log_2(i);
    std::cout.precision(17);
    std::cout<<" log2("<<i<<") = "<<good<<"; or "<<bad<<" from "<<bad_d<<")\n";
  }
  return 0;
}

HTML

<section id="main">
  <div>
    <h1 id="title">Exercitation ullamco laboris</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
      occaecat cupidatat non proident, sunt in culpa qui officia deserunt
      mollit anim id est laborum.
    </p>
  </div>
</section>

Javascript

<script>
function toCelsius(f) {
    return (5/9) * (f-32);
}

function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace(/microsoft/i,"W3Schools");
    document.getElementById("demo").innerHTML = txt;
}
</script>

PHP

<?php
$t = date("H");

if ($t < "20") {
    echo "Have a good day!";
} else {
    echo "Have a good night!";
}
?>

Python

import csv

# write stocks data as comma-separated values
writer = csv.writer(open('stocks.csv', 'wb', buffering=0))
writer.writerows([
    ('GOOG', 'Google, Inc.', 505.24, 0.47, 0.09),
    ('YHOO', 'Yahoo! Inc.', 27.38, 0.33, 1.22),
    ('CNET', 'CNET Networks, Inc.', 8.62, -0.13, -1.49)
])

# read stocks data, print status messages
stocks = csv.reader(open('stocks.csv', 'rb'))
status_labels = {-1: 'down', 0: 'unchanged', 1: 'up'}
for ticker, name, price, change, pct in stocks:
    status = status_labels[cmp(float(change), 0.0)]
    print '%s is %s (%s%%)' % (name, status, pct)

Ruby

# Simple for loop using a range.
for i in (1..4)
    print i," "
end
print "\n"

for i in (1...4)
    print i," "
end
print "\n"

# Running through a list (which is what they do).
items = [ 'Mark', 12, 'goobers', 18.45 ]
for it in items
    print it, " "
end
print "\n"

# Go through the legal subscript values of an array.
for i in (0...items.length)
    print items[0..i].join(" "), "\n"
end

Last edited: Jul 30, 2017


Categories:
Tags: