Page history Edit this page 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.

NB: code fence syntax highlighting is currently not working locally due to differences in local build configuration. However, highlighting will display as appropriate on the public wiki.

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.

Line numbers

Right now, inline code snippets cannot have line numbers; see issue 128 for technical details. For now, if you want to have line numbers, use the Embedding external code approach below.

You might be familiar with the linenos argument to the highlight directive. Please do not use this. As of this writing (Q3 2021), it produces badly formed HTML output, which can break wiki pages.

Making code snippets executable and editable

By enabling the imjoy extension, you can make your code snippets executable and editable. It makes wiki pages more interactive, thus suited for building demos and tutorials. Currently, it support ImageJ macro and ImJoy plugin scripts.

To enable it, you need to:

  1. add imjoy to extensions in the front matter of your page;
  2. add a HTML comment <!-- ImJoyPlugin: { ... } --> before your code block. Inside the {} you can pass settings for setting up the ImJoy plugin.

Here is an example for making an ImageJ macro code snippet executable.

First, enable the imjoy extension in the beginning of your page:

---
title: My Awesome Page
extensions: ["imjoy"]
---

Let’s say you have the following macro:

print("hello world");

To make it executable, you just need to add an HTML comment:

<!-- ImJoyPlugin: { "type": "macro"} -->
```javascript
print("hello world");
```

For more detailed instructions about using ImageJ macro with ImageJ.JS, please refer to ImageJ.JS.

Similarily, you can execute an ImJoy plugin in code fences which can be used for integrating image viewers such as Kaibu, vizarr and ITK/VTK viewer, or running ImageJ2 and Fiji through PyImageJ on a remote Jupyter server (e.g. on Binder). For more details, please refer to ImJoy.

Embedding external code

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

Parameters supported by the code include are:

Parameter Description Supported values Default
service Which repository hosting service github, gitlab, bitbucket github
org Name of the organization any string none
repo Name of the repository any string none
branch Which branch, tag, or commit any string none
path Path to the resource in source control any string none
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

Embedding from GitHub

Code

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

Result

Additional parameters supported by embeds from GitHub specifically:

Parameter Description Supported values Default
style Syntax highlighting color scheme various1 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

Embedding from GitLab

We want to support embedding from GitLab, but it’s not implemented yet:

Code

{% include code
     service="gitlab"
     org="tjian-darzacq-lab"
     repo="Spot-On-TrackMate"
     branch="master"
     path="src/main/java/plugin/trackmate/action/ExportTracksToSpotOn.java"
     line-start=91 line-end=112
     label="Spot-On export TrackMate tracks to XML" %}

Result

Spot-On export TrackMate tracks to XML

Embedding content from GitLab is not yet supported. Are you a JavaScript developer who can make it happen? Reach out to us on the Image.sc Forum!

Embedding from BitBucket

We want to support embedding from GitLab, but it’s not implemented yet:

Code

{% include code
     service="bitbucket"
     org="fernandoamat"
     repo="keller-lab-block-filetype"
     branch="d4755438000475d60e51ee2b793a7fd92c1be7fe"
     path="src/main/java/org/janelia/simview/klb/KLB.java"
     line-start=279 line-end=297
     label="Reading KLB data as ImgLib2 image" %}

Result

Reading KLB data as ImgLib2 image

Embedding content from BitBucket is not yet supported. Are you a JavaScript developer who can make it happen? Reach out to us on the Image.sc Forum!

Footnotes

  1. Valid style values for GitHub embeds 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

    ↩