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);