Code Fences
A Code Fence preserves all text content it encapsulates and presents it exactly how it was written. Code Fences are useful for presenting information that needs to be written explicitly, like examples of code. They can provide users with content that can be copied and used for their own purposes, too.
Syntax
Code Fences are created in three steps:
Start with a line containing ``` or ~~~.
A following line or lines of text content.
End with a line containing ``` or ~~~, matching the starting line.
Basics
A simple example using ``` tags. Any amount of text can be written between the two tags, as long as the tags match and are written correctly.
```
function addTwoNumbers(num1, num2) {
return num1 + num2;
}
```
Code Fences can be created using ~~~, too.
~~~
function addTwoNumbers(num1, num2) {
return num1 + num2;
}
~~~
No Parsing in Code Fences
Markdown written inside of Code Fences will render as plain text.
```
# Heading 1 in Plain Text
```
HTML will also render as plain text when written inside Code Fences.
```
<p>HTML in plain text</p>
```
Markdown++
A custom Paragraph Style can be given to a Code Fence using a Markdown++ style tag on the line directly above the Code Fence.
<!--style:CustomCodeFence-->
```
function addTwoNumbers(num1, num2) {
return num1 + num2;
}
```
ePublisher Style Information
Default Style Properties
Style Type: Paragraph
Default Style Name: Code Fence
Property | Value |
|---|
background color | #efefef |
font family | Consolas |
font size | 11pt |
margin top | 6pt |
margin bottom | 6pt |
padding top | 12pt |
padding right | 12pt |
padding bottom | 12pt |
padding left | 12pt |
overflow | auto |
white space | pre |
If a custom style name is assigned to a Code Fence, that style name will still inherit all of the listed default style information.