InstantASP Support

Help & Support

Adding Syntax Highlighted Code Block Within InstantKB Articles


InstantKB lets you quickly & easily add code examples into your support content. This article describes the options InstantKB offers and walks you through getting started with each. We hope you find it useful.

Copying Code From IDEs
To ensure clean mark-up before pasting code from your development environment into the InstantKB editor we would first suggest you copy your code example into a regular ASCII based text editor such as NotePad or SublimeText to remove any specific formatting your IDE may add.

Regular Code Blocks

This approach simply applies a CSS class around your code example to make this visually district from other contact within your article and look similar to code you would find within an IDE.

The following screen grab shows how to apply this...

1. Copy and paste the code into the InstantKB editor. Paste the clean code into the InstantKB editor and select this.

2. From the Apply CSS drop down list within the editor select the "kb-code" CSS class to wrap this CSS class around your code example.

Syntax Highlighted Code Blocks Using Googles Pretty Print

Recommended Approach - This is our recommended approach. We suggest this approach as it minimizes the mark-up within your article and also allows for global theming of your code examples via the InstantKB CSS files.

To add syntax highlighted code blocks formatted by Google Pretty Print into your InstantKB articles you can use the pre-defined templates provided by InstantKB to allow you to do this.

To add syntax highlighted code blocks follow the steps below...

1. Place your cursor within the editor where you would like to add your code example.

2. Click the Template Manager to the top right within the editor as shown below...

3. Within the Template Manager click the PrettyPrintCodeBlocks folder.

Now simply double click the template you wish to insert. There are several templates within the PrettyPrintCodeBlocks folder for various different programming languages. For example if we wanted to add syntax highlighted JavaScript we would select the js.htm template. Similar for syntax highlighted C# we would added the csharp.htm template.

Once you select a code template and insert this into the editor this will appear where your cursor was placed previously. You can see this below...

Next select all the text inside the new code area...

And paste your code example into the code area as shown below...

NOTE: As this example uses JavaScript to power the syntax highlighting you won't see syntax highlighting within the rich text editor when editing the article. You will need to preview or view the article to see the syntax highlighting being applied to your code example.You can also further customize or theme the code example CSS by searching your prettyprint within the 2-debug-kb.css file provided with InstantKB.

The Final Result

You can see the final syntax highlighted code example below within our article...

Syntax Highlighted Code Blocks (using Inline Styles)

When adding or editing articles within the editor you'll also find a Format Code Blocks option within the editor toolbar. This option also allows you to apply syntax highlighting to code examples however unlike the Google Pretty Print approach above this approach adds inline styles into your code example to provide the syntax highlighting.

You can see the Format Code Blocks Dialog below. We'll use the same HTML as our previous example and paste this into the format code block dialog...

Once we click OK our HTML is added into our article like so...

Notice with this last approach we can see the syntax highlighting within the editor as this is using inline styles and not a JavaScript library to apply the CSS classes.

This may be OK for some however you should consider this approach adds many inline styles into your article HTML to achieve the syntax highlighting so if you wish to change this in the future and have lots of code examples you would need to revisit each code example and format them once again.

For this reason we strongly suggest you consider the PrettyPrint approach demonstrated above whenever you wish to include code example within your InstantKB articles.

Optionally provide private feedback to help us improve this article...

Thank you for your feedback!

Comments require login or registration.


Product: InstantKB
Article not rated yet.
Article has been viewed 2.4K times.
Last Modified: 2 Years Ago
Last Modified By: Ryan Healey


Similar Articles