Edit page History How do I edit this website?

Source Code

This page describes nice ways of embedding source code in a page.

Inline code snippets

If you just want to write a short snippet of code as part of a sentence, surround the code in backtick symbols (`).

Code

Type `print('Hello world!')` and save as `hello.py`.

Result

Type print('Hello world!') and save as hello.py.

Code fences

A “code fence” is three backtick symbols (```) preceding your code, and another three concluding it. Optionally, you can write the name of the language in small case next to the leading fence to declare syntax highlighting is desired with the stated language.

Java example

Code

```java
Image3DUniverse univ = new Image3DUniverse();
univ.show();
univ.addMesh(yourImagePlus, null, "somename", 50,
  new boolean[] {true, true, true}, 2);
```

Result

Image3DUniverse univ = new Image3DUniverse();
univ.show();
univ.addMesh(yourImagePlus, null, "somename", 50,
  new boolean[] {true, true, true}, 2);

Python example

Code

```python
def update_progress(progress):
    barLength = 10 # length of progress bar
    block = int(round(barLength*progress))
    text = f'\rPercent complete: ' +
      f'[{"#"*block + "-"*(barLength-block)}] ' +
      f'{progress*100}%'
    sys.stdout.write(text)
    sys.stdout.flush()
```

Result

def update_progress(progress):
    barLength = 10 # length of progress bar
    block = int(round(barLength*progress))
    text = f'\rPercent complete: ' +
      f'[{"#"*block + "-"*(barLength-block)}] ' +
      f'{progress*100}%'
    sys.stdout.write(text)
    sys.stdout.flush()

Highlight directive

Alternately, there is a highlight Liquid directive you can try. It looks like this:

Code

{% highlight java %}
log.info("You're a wizard, Harry!");
log.error("I'm a what?");
{% endhighlight %}

Result

log.info("You're a wizard, Harry!");
log.error("I'm a what?");

The highlight directive and code fences are separate features, but functionally very similar. If code fences are not working as you like, give the highlight directive a try to see if it does any better.

Embedding code from GitHub

If you have a block of code in a GitHub repository, you can embed it dynamically into the page using the github-embed include. This approach has the advantage of avoiding copy-paste skew as the code evolves over time.

Code

{% include github-embed
     org="duckythescientist"
     repo="obfuscatedLife"
     branch="original"
     path="life.c"
     label="Conway's Obfuscated Game of Life" %}

Result

Conway’s Obfuscated Game of Life

Other parameters supported by the github-embed include are:

Parameter Description Values Default
line-start First line to embed >= 1 1
line-end Last line to embed >= 1 99999
label Hyperlinked label to place before the code any string no label
style Syntax highlighting color scheme various* github
show-border Whether to draw a border around the frame true or false true
show-line-numbers Whether to number the lines true or false true
show-file-meta Whether to include the footer with links true or false true
show-copy Whether to include the Copy button on mouseover true or false true

* Valid style values are:

  • a11y-dark
  • a11y-light
  • agate
  • an-old-hope
  • androidstudio
  • arduino-light
  • arta
  • ascetic
  • atelier-cave-dark
  • atelier-cave-light
  • atelier-dune-dark
  • atelier-dune-light
  • atelier-estuary-dark
  • atelier-estuary-light
  • atelier-forest-dark
  • atelier-forest-light
  • atelier-heath-dark
  • atelier-heath-light
  • atelier-lakeside-dark
  • atelier-lakeside-light
  • atelier-plateau-dark
  • atelier-plateau-light
  • atelier-savanna-dark
  • atelier-savanna-light
  • atelier-seaside-dark
  • atelier-seaside-light
  • atelier-sulphurpool-dark
  • atelier-sulphurpool-light
  • atom-one-dark
  • atom-one-dark-reasonable
  • atom-one-light
  • codepen-embed
  • color-brewer
  • darcula
  • dark
  • default
  • docco
  • dracula
  • far
  • foundation
  • github
  • github-gist
  • gml
  • googlecode
  • gradient-dark
  • grayscale
  • gruvbox-dark
  • gruvbox-light
  • hopscotch
  • hybrid
  • idea
  • ir-black
  • isbl-editor-dark
  • isbl-editor-light
  • kimbie.dark
  • kimbie.light
  • lightfair
  • magula
  • mono-blue
  • monokai
  • monokai-sublime
  • night-owl
  • nord
  • obsidian
  • ocean
  • paraiso-dark
  • paraiso-light
  • purebasic
  • qtcreator_dark
  • qtcreator_light
  • railscasts
  • rainbow
  • routeros
  • shades-of-purple
  • solarized-dark
  • solarized-light
  • sunburst
  • tomorrow
  • tomorrow-night
  • tomorrow-night-blue
  • tomorrow-night-bright
  • tomorrow-night-eighties
  • vs
  • vs2015
  • xcode
  • xt256
  • zenburn