Document360 uses Prism.js for syntax highlighting and supports syntax highlighting in code blocks for languages like:

  • HTML
  • C#
  • Java
  • JavaScript
  • XML
  • JSON
  • CSS
  • SQL
  • Python
  • Markdown
  • PHP
  • PowerShell
  • Text

For a complete list of supported languages, visit Prism's Supported Languages documentation.


Creating code blocks in the Markdown editor

In the Markdown editor, you can use two methods to create fenced code blocks.

  1. Using triple backticks ``` before and after the included code snippet.

To apply a language's specific syntax highlighting, include the language shortcode (see list below) after the first 3 backticks.

For example:

```csharp
[your code snippet]
```

(or)

  1. Using the Insert codeblock option from the formatting toolbar on the editor

Explanatory GIF to add a code block in the Markdown editor

1_ScreenGIF-Creating_code_blocks_in_the_Markdown_editor


Creating code blocks in WYSIWYG(HTML)

You can create a code block by clicking the code block icon and selecting your desired language.

  1. Navigate to the desired article in the WYSIWYG editor

  2. Click on the code block icon, and a window appears

  3. Choose your desired language from the drop-down menu

  4. Enter your code into the Insert your code field

  5. Once done, click on the Insert button to add the code block to your article

Explanatory GIF to add a code block in the WYSIWYG editor (HTML editor)

2_ScreenGIF-Creating_code_blocks_in_WYSIWYG_HTML


Creating code blocks in the Advanced WYSIWYG editor

  1. Navigate to the desired article in the Advanced WYSIWYG editor

  2. In the Insert section, click on the code block icon
    (or)
    Enter three backticks and press Enter or Space

  3. Enter the appropriate heading, and then input the desired code.

Explanatory GIF to add a code block in the Advanced WYSIWYG editor

3_ScreenGIF-Creating_code_blocks_in_Advanced_WYSIWYG_editor

Language shortcodes

  • C: c
  • C++: CPP, c++
  • C#: csharp
  • CSS: css
  • CoffeeScript: coffeescript
  • HTML: html
  • JSON: json
  • Java: java
  • JavaScript: javascript, js
  • Objective-C: objective-c, obj-c, objc
  • Objective-C++: objc++
  • PHP: php
  • Perl: perl, pl
  • Python 3: python3, py3
  • Python: python, py
  • Ruby: ruby, rb
  • Snobol: snobol
  • XML: xml

Custom language

If you wish to have a language name unavailable in the list, you can choose the Custom language. In custom language, you can add the desired code block title.

  1. Click Insert codeblock
  2. In the language dropdown, select Custom
  3. Type the desired title and code
  4. Click Insert

Indentation and code blocks

Any text indented at least four spaces will be treated as a code block. This is helpful for more extended code snippets. This code will not be syntax-highlighted but will be shown as plain text.

The following code block is created using indents instead of backticks.

def test():
    logging.error('Test failed')

Code block examples

C# block

using System;
namespace HelloWorld
{
    class Hello 
    {
        static void Main() 
        {
            Console.WriteLine("Hello World!");

            // Keep the console window open in debug mode.
            Console.WriteLine("Press any key to exit.");
            Console.ReadKey();
        }
    }
}

Javascript block

function $initHighlight(block, cls) {
try {
if (cls.search(/\bno\-highlight\b/) != -1)
return process(block, true, 0x0F) +
` class="${cls}"`;
} catch (e) {
/* handle exception */
} 
export $initHighlight;

XML block

<book id="bk101">
      <author>Gambardella, Matthew</author>
      <title>XML Developer's Guide</title>
      <genre>Computer</genre>
      <price>44.95</price>
      <publish_date>2000-10-01</publish_date>
      <description>An in-depth look at creating applications 
      with XML.</description>
   </book>

JSON block

{
    "one": 2,
    "three": {
        "point_1": "point_2",
        "point_3": 3.4
    },
    "list": [
        "one",
        "two",
        "three"
    ]
}

PowerShell block

$user = Read-Host "Enter Username"
$pass = Read-Host "Enter Password" -AsSecureString

Ruby block

require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html