Background

This site uses Markdown for simplified input. Specifically, it adheres to the CommonMark spec. Code is highlighted using highlight.js.

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

highlight.js doesn't always correctly guess the language of a piece of code. Limiting the set of loaded languages (like I have on this site) helps with that, as it will only use languages that are loaded. But the safest option is to add a language hint to all code fences:

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

' Some VB code
Dim str as String
str = New String("test")
~~~json
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
~~~

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

To include code fence characters in a code block, say if you wanted to demonstrate how to write a code fence, you would wrap the code fence in a different number of backticks or tildes. Use the special language hint "nohighlight" if you don't want the output highlighted as code.

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

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

Note: You can always manually create the <pre><code>...</code></pre> tags, including the language hint (prefixed with "language-"). But there's really no need to do that since you can wrap anything in a code fence.

<pre><code class="language-vb">
Protected Sub PrepareEmailModal
    If Not Page.IsPostBack Then
        ' Populate email modal with some defaults
        ucModal.Subject = "Some Default Subject"
        ucModal.Body = "Some body content"
    End If
End Sub
</code></pre>

Protected Sub PrepareEmailModal
    If Not Page.IsPostBack Then
        ' Populate email modal with some defaults
        ucModal.Subject = "Some Default Subject"
        ucModal.Body = "Some body content"
    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.

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

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

Inline Code and Backtick Characters

To add inline code, wrap it in single backticks `like this`, which gives you a code tag like this. (Note: Inline code tags are not syntax highlighted.)

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

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

Code Fences and <Code> Tags Without Syntax Highlighting

To exclude a code fence from syntax highlighting, use the language hint nohighlight. E.g.:

```nohighlight
const someString = 'new test';
alert(someString);
```

const someString = 'new test';
alert(someString);

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

Custom Attributes

```js title="Custom Title Attribute"
const someString = 'new test';
alert(someString);
```

const someString = 'new test';
alert(someString);
Published On: April 8, 2024Categories: Uncategorized