Code

Scipress has first-class support for embedding code in posts, in Markdown. Code snippets come in two flavors - inline code and fenced code blocks.

Inline code¶

You can create inline code by wrapping a code snippet within backticks.

Use `pip install <package name>` to install a Python package.

Syntax highlighting¶

Append {:lang} to the end of inline code to highlight language-specific syntax.

Use `str.replace(' ', '-'){:python}` to replace spaces with dashes.

Fenced code blocks¶

You can create a fenced code block by wrapping one or more lines of code within three backticks above and below.

```
foo = 1
bar = 2
baz = foo + bar
```

foo = 1
bar = 2
baz = foo + bar

Syntax highlighting¶

Enable language-specific syntax highlighting by appending one of the supported language codes to the opening backticks.

```python
def hello():
"""Prints 'hello world'"""
 
  msg = "hello world"
  print(msg)
```

def hello():
"""Prints 'hello world'"""
 
  msg = "hello world"
  print(msg)

Title¶

Give your code block a title with the title parameter.

```r title="Basic Usage"
library(ggplot2)
 
ggplot(mpg, aes(displ, hwy, colour = class)) + 
  geom_point()
```

library(ggplot2)
 
ggplot(mpg, aes(displ, hwy, colour = class)) + 
  geom_point()

Caption¶

Give your code block a caption with the caption parameter.

```javascript caption="Array.map() returns a new array, leaving the original array unmodified."
const array1 = [1, 4, 9, 16];
const map1 = array1.map((x) => x * 2);
```

const array1 = [1, 4, 9, 16];
const map1 = array1.map((x) => x * 2);

Line numbers¶

To display line numbers in a code block, include the showLineNumbers property.

```python showLineNumbers
def hello():
"""Prints 'hello world'"""
 
  msg = "hello world"
  print(msg)
```

def hello():
"""Prints 'hello world'"""
 
  msg = "hello world"
  print(msg)

Line highlighting¶

You can highlight

• a range of lines using {j-k} or
• a specifc line using {m} or
• a combination using {a-b, c-d, ... m, j, k, ...}

```python {2,4-5}
def hello():
"""Prints 'hello world'"""
 
  msg = "hello world"
  print(msg)
```

def hello():
"""Prints 'hello world'"""
 
  msg = "hello world"
  print(msg)

Word highlighting¶

You can highlight

• a specific word in a code block using /word/ or "word"
• the ith instance of a word in a code block using /word/i
• the i-jth instances of a word in a code block using /word/i-j

```python /hello/ /world/2
def hello():
"""Prints 'hello world'"""
 
  msg = "hello world"
  print(msg)
```

def hello():
"""Prints 'hello world'"""
 
  msg = "hello world"
  print(msg)

Runnable code¶

You can make runnable code snippets with codepen.io. After creating a new code pen, use the ::codepen leaf directive, passing in the src attribute to embed it in your post.

Example¶

::codepen{src="https://codepen.io/Ben-Gorman/embed/xxBBegr?default-tab=html%2Cresult&editable=true"}

Additional parameters¶

CodePen's source URL supports various query parameters that allow you to customize the settings of your embedded codepen. These include

• default-tab
  Which tab to show by default?

  Example: src="https://codepen.io/XYZ/embed/xxId?default-tab=css

• theme-id
  Which theme to show? Can be light or dark. Omit this parameter to use the codepen's default.

  Example: src="https://codepen.io/XYZ/embed/xxId?theme-id=light

• editable
  Should this codepen be editable by readers? (Readers will not be able to modify the original codepen). Can be true or false.

  Example: src="https://codepen.io/XYZ/embed/xxId?editable=true