Code blocks#

If you're writing technical documentation, code blocks are essential. This is why Guider code blocks are jam-packed with features.

Basic code block#

Code blocks are very easy to write in Markdown. Simply wrap your code in 3 backticks (```) in front and 3 after. Optionally you can specify a programming language directly after the first 3 backticks for the code to be syntax highlighted.

console.log("hello world")

```js
console.log("hello world")
```

In Guider, the programming language is shown top right of the codeblock. Hovering over a codeblock will show a copy button.

Inline code#

In the case where you want to display single line of code inside of a normal paragraph, instead of an entire code block. You can use inline code blocks.

Simply wrap some text in backticks (`)

Simply wrap `some text` in backticks (`)

To add syntax highlighting for a programming language to your inline codeblock. You can end your inline code with {:LANGUAGE}.

For example this line of javascript (js): import hello from "world";.

For example this line of javascript (js): `import hello from "world";{:js}`.

Titled code blocks#

You can add a title to a codeblock by simply adding the annotation title="my-file.txt". The double quotes are required.

function hello() {
  console.log("hello world");
}

```js title="index.js"
function hello() {
  console.log("hello world");
}
```

Line numbers#

To add line numbers to your code block, add the attribute showLineNumbers to your code block.

function test() {
  console.log("hello world")
}

```js showLineNumbers
function test() {
  console.log("hello world")
}
```

Highlight words#

To highlight specific words or phrases, add the /xxx/ annotation to your code block.

function hello() {
  console.log("hello world")
}

```js /hello/
function hello() {
  console.log("hello world")
}
```

In the case that you want to start highlighting at a specific point and not everything. You can add a comment with [!code word:xxx]. If you want it to highlight multiple, you can specify an amount like so: [!code word:xxx:3] (it won't count on the line itself).

function hello() {
  console.log("hello world");
  console.log("another hello world");
}

```js
// [\!code word:hello:2]
// make sure to remove the slash in this example before copying
function hello() {
  console.log("hello world");
  console.log("another hello world");
}
```

Highlight lines#

At times, highlighting entire lines can be useful. There are a handful of choices here:

• // [\!code --] - mark line as removed
• // [\!code ++] - mark line as added
• // [\!code highlight] - highlight line
• // [\!code error] - show an error background on the line
• // [\!code warning] - show an warning background on the line

You can add this at the end of any line of code in your code block to apply the style to the line. Make sure to remove the slash from the examples.

 
console.log("Removed line"); 
 
console.log("Added line"); 
 
console.log("Highlighted line"); 
 
console.log("Error on line"); 
 
console.log("Warning on line"); 
 

If you want to apply line highlighting to multiple lines, you can also add it as an annotation {1,3-5}. This will apply to line 1 and the range 3 until 5 (inclusive)

function hello() {
  console.log("hello world");
  console.log("another hello world");
 
  cool();
  return 42;
}

```js {1,3-5}
function hello() {
  console.log("hello world");
  console.log("another hello world");
 
  cool();
  return 42;
}
```

Focus lines#

When you have a bunch of code for completeness, but most of it is not relevant to the example. You have the option to focus only the lines you want. Simply add [!code focus] in a comment at the end of your lines that you want to focus.

function hello() {
  console.log("hello world"); 
  console.log("another hello world"); 
}

```js
// make sure to remove the slashes in this example before copying
function hello() {
  console.log("hello world"); // [\!code focus]
  console.log("another hello world"); // [\!code focus]
}
```

NPM integration#

A nice little utility provided by The Guild called @theguild/remark-npm2yarn can help you show your NPM install command in other package managers.

npm install @neato/guider

```sh npm2yarn
npm install @neato/guider
```