Heads Up: This document is in the process of being updated after moving from Google Prettify to highlight.js. It may take a few days. – Ben, April 8, 2024

Background

This site uses Markdown for simplified input and highlight.js for syntax highlighting.

Adding Code to a Post

There are two ways to add code to a post using Markdown. Either indent the code with 4 spaces or a tab, or wrap the code block with three backticks (```) or three tildes (~~~).

Example of the indented option:

Input:

    var s = 'some test';
    console.log(s);

Output:

var s = 'some test';
console.log(s);

Examples using backticks and tildes:

Input:

```
var s = 'some test';
console.log(s);
```

Output:

var s = 'new test';
alert('test');

Input:

~~~
var s = 'some test';
console.log(s);
~~~

Output:

var s = 'new test';
alert('test');

Language Hinting

Sometimes highlight.js doesn’t correctly guess the language of the code sample. For example, it detects this as bash instead of JS: var test = "someval";. It’s easy to add a language hint when using the backticks or tildes methods:

Input:

```vb
Dim str as String
' Some comment
str = New String("test")
```

Output:

Dim str as String
' Some comment
str = New String("test")

Input:

~~~json
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
~~~

Output:

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

Note: You can always manually create the <pre><code>…</code></pre> tags with the language specified.

Input:

<pre><code class="language-vb">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        ' Populate email modal with some defaults
        ucModalEmail.DefaultSubject = "Daily Work Schedule | 2017-11-23 (Tue)"
        ucModalEmail.Subject = ucModalEmail.DefaultSubject
    End If
End Sub
</code></pre>

Output:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        ' Populate email modal with some defaults
        ucModalEmail.DefaultSubject = "Daily Work Schedule | 2017-11-23 (Tue)"
        ucModalEmail.Subject = ucModalEmail.DefaultSubject
    End If
End Sub

You can’t add a language hint when using the indented option to insert code.

Inline Code

To add inline code, wrap it in single backticks `like this` and it will be wrapped in a code tag and look like this. (Note: I have not enabled highlighting for code tags, and if I do enable it, there’s no way to specify the language, so it wouldn’t properly highlight VB.)

To include a backtick in regular text (not in inline code), escape it with a backslash: \`

To include a backtick inside a piece of inline code like ` this, open and close the code tag with a different number of backticks than appear in the inline code. E.g. If you want to display 1 backtick in the inline code, open/close with two or more. To include two in a row in the code tag, open/close with 1 or 3 or more. ``this`works`` becomes this`works, `this``works` becomes this``works, etc.
More info here: https://meta.stackexchange.com/a/70679/286764

<PRE> Tag Without Syntax Highlighting

This is outdated…

To include a <pre> tag without syntax highlighting, simply add the class noprettyprint to it. E.g.:

Input:

<pre class="noprettyprint">
    Some stuff inside a PRE tag
</pre>

Output:

Some stuff inside a PRE tag

VB.Net

VB is not automatically detected by PrettyPrint, and it requires a language hint. Otherwise, single quote would be interpreted as the start of a string, not a comment. To add a language hint in Markdown, you must open and close the code block with ```, with the language hint on the opening quotes: ```vb. (No indenting required when opening and closing a code block this way.)

Input:

```vb
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        ' Populate email modal with some defaults
        ucModalEmail.DefaultSubject = "Daily Work Schedule | 2017-11-23 (Tue)"
        ucModalEmail.Subject = ucModalEmail.DefaultSubject
    End If
End Sub
```

Output:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        ' Populate email modal with some defaults
        ucModalEmail.DefaultSubject = "Daily Work Schedule | 2017-11-23 (Tue)"
        ucModalEmail.Subject = ucModalEmail.DefaultSubject
    End If
End Sub

ASP.Net

No need to include a language hint, and there is no language hint for ASP or ASP.Net anyway.

Input:

```
<asp:Label ID="lblTestLabel" runat="server">This is a label</asp:Label>
<asp:PlaceHolder ID="pnlTitle_NewPermit" runat="server">  
    <asp:Literal ID="liNewType" runat="server"></asp:Literal>
    Some Content Here
</asp:PlaceHolder>
```

Output:

<asp:Label ID="lblTestLabel" runat="server">This is a label</asp:Label>
<asp:PlaceHolder ID="pnlTitle_NewPermit" runat="server">
    <asp:Literal ID="liNewType" runat="server"></asp:Literal>
    Some Content Here
</asp:PlaceHolder>

Notes: When using ASP.Net markup with ASP tags inside a property, the tag will not be properly highlighted, as seen here:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <ContentTemplate>
    <asp:Literal ID="liNewType" runat="server"></asp:Literal>
    <asp:Button ID="SubmitButton" 
        runat="server" 
        Text="partial postback"
        CommandArgument="<%#Eval('id')%>" />
  </ContentTemplate>
</asp:UpdatePanel>