Heads Up: This document is in the process of being updated after moving from Google Prettify to highlight.js. – Ben, June 9, 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. The most flexible way is to use “code fences”, which entails wrapping the code between two lines containing 3 backticks (```) or tildes (~~~). Code fences allow you to add a language hint to tell the highlighter what language is in use. The other way to add code to a post is to indent the code with 4 spaces or a tab, which is covered further down in this post. The indent/space option doesn’t allow language hinting.
Code fences using backticks or tildes:
``` var s = 'some test'; console.log(s); ```
var s = 'new test';
alert('test');
~~~ var s = 'some test'; console.log(s); ~~~
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:
```vb Dim str as String ' Some comment str = New String("test") ```
Dim str as String
' Some comment
str = New String("test")
~~~json { "firstName": "John", "lastName": "Smith", "age": 25 } ~~~
{
"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
Indented Code Blocks Using Tab or 4 Spaces:
You can also add code by indenting it with a tab or 4 spaces. However, you cannot add a language hint to indented code blocks, so code fences are preferred.
var s = 'some test'; console.log(s);
var s = 'some test';
console.log(s);
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
Code and <Code> Tags Without Syntax Highlighting
To exclude a code fence from syntax highlighting, use the language hint nohighlight
. E.g.:
```nohighlight var s = 'some test'; console.log(s); ```
var s = 'new test';
alert('test');
To exclude a <code> tag from syntax highlighting, use the class nohighlight
. E.g.:
<pre> <code class="nohighlight"> Some stuff inside a PRE tag </code> </pre>
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>