SmartDoc Feature: Code Blocks

Help your code stand out from your content with code blocks

Peter Novosel avatar
Written by Peter Novosel
Updated over a week ago

SmartDoc's Code Block feature provides you with a way to display code so that it stands out from the rest of your content. Syntax formatting is available for a variety of languages to improve clarity and readability. Here is a JavaScript example:

Text is also displayed in a fixed-width font to make it easy to see how sections of indented text line up, and line numbers make it easy to reference specific sections of the code. Looks great, right?

And don't let Code Block's name scare you off - this isn't a feature that's only for programmers! You can use a Code Block with regular text (no highlighting applied) if you just want that content to be visually distinctive on the page.

What programming languages are supported?

A lot! Here is the complete list:

  • Plain Text (the default)

  • C

  • C#

  • C++

  • Clojure

  • CSS

  • Dart

  • Erlang

  • F#

  • Go

  • HTML

  • Java

  • JavaScript

  • JSON

  • Kotlin

  • Markdown

  • Perl

  • PHP

  • PowerShell

  • Python

  • R

  • Ruby

  • Rust

  • SASS

  • Scala

  • Shell

  • SQL

  • Swift

  • TypeScript

  • XML

  • YAML

Using SmartDoc Code Blocks

Adding a new Code Block

There are two ways to add Code Blocks - either through the slash-command menu, or by using markup in your SmartDoc text.

Add from the slash-command menu

Here's how to add your Code Block via the slash-command menu:

  1. Type a / character at the start of a new line or after a space

  2. Type all or part of the words code block or scroll to the item with your mouse (it's in the Advanced section)

  3. Click Insert Code Block

Add from text (markdown)

You can add a Code Block in a flash by typing ``` (three consecutive backtick characters) at the beginning of a line.

The Code Block will be added to your SmartDoc, and your cursor will be focused in the new control - you're ready to add your content.

Here's how it will look:

Setting Language Type

As we just mentioned in the intro Code Block defaults to "Plain Text" when first created, but it's easy to pick your language of choice. Just click on the drop-down selector displayed under the Code Block and pick your language type of choice, like this:

Changing Word Wrapping

Code Blocks have word wrapping enabled by default. There may be times when you want to view your code without wrapping - it's a snap to configure. Here's what word wrapping "on" looks like:

To stop the block from wrapping text, just click the first icon (three equal lines) that's right next to the language selection drop-down. A scrollbar will be added to the display and your text will just continue past the right margin, like this:

Editing a Code Block

Edit the content of your Code Block just link text in a Text Area field. You can also change language type and wrapping any time.

Remember to save the record to keep the changes you make to your Code Block!

Deleting a Code Block

If you don't need your Code Block anymore you can easily remove it from your SmartDoc. Just do the following:

  1. Click on the Code Block

  2. Click the Trash Can icon (a "Delete" tooltip will show on hover)

The Code Block is instantly deleted. Decide you want it back? Just click Control-Z on your keyboard to undo the delete and get the whole Code Block back - intact!

Did this answer your question?