Code Highlighting

Prism.js is the best solution so far. highlight.js is pretty decent too, but prism.js simplicity is awesome.

Using sass to pre-process css
Copy to clipboard
Show language

Line Numbers

Use prism tag. Place the custom liquid ruby extension prism-plugin.rb into _plugins.

{% prism ln=true %}
1st line
2nd line
3rd line
4th line
{% endprism %}

The output:

1st line
2nd line
3rd line
4th line

Line Highlight

Highlight lines with the option line. Single lines or ranges are possible. Using in conjunction with line numbers won’t show the line highlight number.

{% prism line="1,3,6-9" %}
1st line
2nd line
3rd line
4th line
5th line
6th sense
7 samurai
8 nights
9 wives
10 examples
{% endprism %}

The output:

1st line
2nd line
3rd line
4th line
5th line
6th sense
7 samurai
8 nights
9 wives
10 examples

File Highlight

Load external file

<pre class="line-numbers" data-src="/assets/code/prism-json.js"></pre>

Command Line

Command Line allows either to display a user and host for *nix systems or a prompt for M$ systems.

{% cmdline user=tan host=localhost lang=bash %}
whoami
{% endcmdline %}

Output

whoami

Example M$:

{% cmdline prompt=/opt/java/bin lang=bash %}
java -version
{% endcmdline %}

Output:

java -version

Copy To Clipboard

clipboard.js is pre-loaded before the prism plugin.

Languages

JSON

{
  "firstName": "John",
  "lastName": "Smith",
  "isAlive": true,
  "age": 27,
  "address": {
    "streetAddress": "21 2nd Street",
    "city": "New York",
    "state": "NY",
    "postalCode": "10021-3100"
  },
  "phoneNumbers": [
    {
      "type": "home",
      "number": "212 555-1234"
    },
    {
      "type": "office",
      "number": "646 555-4567"
    },
    {
      "type": "mobile",
      "number": "123 456-7890"
    }
  ],
  "children": [],
  "spouse": null
}

Python

range(-10, -100, -30)
  -10, -40, -70

Bash

curl -XPOST "http://elasticsearch:9200/_reindex" -H 'Content-Type: application/json' -d'{
"source": {
 "index": "source-index-2017.07.26",
  "_source": [
     "field_1",
     "field_2",
     ..
     "field_30",      
   ],
   "query": {
     "match_all": {}
   }
},
"dest": {
 "index": "target-index-2017.07.26"
}}'

Java

@Data(staticConstructor="of")
public class Company {
    private final Person founder;
    private String name;
    private List<Person> employees;
}

Markdown

## Tables

Colons can be used to align columns.

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

Nginx

server {
    location / {
        proxy_pass http://localhost:8080;
    }

    location /images/ {
        root /data;
    }
}

Yaml

environments:
  - dev
  - itu
  - etu
  - ppd
  - prd