Code Blocks

Code blocks allow you to write in pretty formatted code that has syntax highlighting in multiple coding languages.

To create a code block:

• Type /

• Select Code Block

Supported Languages

The following languages are currently supported for syntax highlighting:

Bash, C , C-Like, C++, C#, CSS, CSV, D, Dart, Django, Docker, Go, Groovy, HTML, HTTP, Javascript, Java, JSON, JSX, Kotlin, Lua, Markdown, Markup, Objective-C, Pascal, Perl, PHP, Powershell, Python, R, Rust, Ruby, Sass, Scss, Scala, SQL, Squirrel, Swift, Typescript, VB.NET, Visual Basic, XML.

If you need more languages, we'd be happy to support them. Give us a nudge!

Code Block Example

Here is how to write the fibonacci sequence in different languages:

function fibonacci(num, memo) {

  memo = memo || {};

​

  if (memo[num]) return memo[num];

  if (num <= 1) return 1;

​

  return memo[num] = fibonacci(num - 1, memo) + fibonacci(num - 2, memo);

}

Multi Language Code Blocks

You can add multiple languages for each code block that will show as tabs, such as the example above.

No Formatting Code Block

Code blocks can have no formatting if language "None" is selected. Also, if only language "None" was provided for the code block, then the language selector will disappear unless if the tab has a title. For example:

This is a code block with no formatting

- Correct?

And another one with title:

A titled code block without formatting keeps its title

Titled Tabs

You can also provide titles for each tab, which is a great way to identify and group the content. For example:

[

 {

  "id": 4,

  "published": true,

  "name": "v1.0",

  "created": "2019-03-20T19:02:14+0000",

  "updated": "2019-03-20T19:02:14+0000",

  "slug": "developerhub.io-api",

  "ordr": 4

 }

]

Collapsing Contents

Code block contents will collapse automatically (if possible) if there are more than 100 lines in the code block. All lines will be folded except the first line. Example:

paths:

  /page/{id}:...​

  /documentation/{id}/page:...​

You may use the widely adopted keyboard shortcuts in a code block to expand or collapse:

• Expand: Ctrl + I
• Collapse: Ctrl + Y

Show Line Numbers

There are two ways to show line numbers:

• For each tab, you could enable showing line numbers from the tab options.
• Globally, you could enable showing line numbers for all code blocks in the project. See option code.showLineNumbers in advanced settings.

Highlight Code

Lines of code can be highlighted. From the tab option menu, you can write down the line numbers to be highlighted. The syntax for highlighting is as such:

• Use dashes - to make an inclusive range.
• Use commas to separate rules.

For example:

• 5-7: Highlights lines 5 to 7.
• 1,2,3: Highlights lines 1, 2 and 3.
• 1,10-20,25: Highlights lines number 1, 10 to 20 and 25.

See the following code blocks for examples:

/** Returns a stripped Markdown

     * @param $html

     * @return string

     */

    public static function toMarkdown($html)

    {

        $converter = new HtmlConverter();

        $converter->getConfig()->setOption('strip_tags', true);

        $converter->getConfig()->setOption('italic_style', '_');

        $converter->getConfig()->setOption('bold_style', '**');

        $converter->getConfig()->setOption('hard_break', true);

​

        return $converter->convert($html);

    }

Line Wrapping

By default, code block lines wrap unless a line exceeds 120 characters or the view is in mobile mode. However, you have the option to enable or disable line wrapping as needed.