Documentation Index

Fetch the complete documentation index at: https://docs.document360.com/llms.txt

Use this file to discover all available pages before exploring further.

As of 22 Nov 2025, the Markdown editor has been upgraded from v1.4.10 to v3.2.2. The toolbar, layout, icons, and editor structure remain unchanged.

How to change the language name text in code blocks

  • Published on Jun 20, 2026
  • 2 minute(s) read
Prev Next

Code blocks in Document360 display the programming language name as a label by default, for example, css, javascript, or xml. For knowledge bases that document proprietary systems, internal tools, or non-standard formats, these generic language labels can be confusing or irrelevant to readers. Replacing them with a consistent custom label like "Example" or "Sample code" makes code blocks clearer and gives your documentation a more polished, branded appearance.

When to use this

Use this customisation when you want to:

  • Replace technical language names with reader-friendly labels (for example, "Sample code" instead of "javascript").
  • Apply a consistent code block label across your entire knowledge base for a uniform look.
  • Document proprietary scripting languages or configuration formats where the default label does not match your content.

NOTE

This CSS change applies to all code blocks across your entire knowledge base — not to individual articles or specific blocks.

Before you begin

You need access to Settings > Knowledge base site > Site customization > Custom CSS & JavaScript in the Knowledge base portal.

How to change the language label in code blocks

  1. Navigate to Settings (

    ) > Knowledge base site > Site customization > Custom CSS & JavaScript in the Knowledge base portal.

    Custom CSS and JavaScript settings panel in the Document360 Knowledge base portal

  2. From the left navigation pane, select the CSS tab and paste the following CSS snippet:

div.code-toolbar>.toolbar .toolbar-item:first-child {
    visibility: hidden;
}
div.code-toolbar>.toolbar .toolbar-item:first-child span:before {
    visibility: visible;
    content: "Example" !important;
}

  1. Replace "Example" with your desired label text, for example, "Sample code", "Command", or your product name.

  2. Click Save.

    CSS tab showing the custom label snippet saved in the Custom CSS and JavaScript panel

Best practices

  • Choose a label that reflects your audience. Readers who are not developers may find labels like "Example" or "Command" more intuitive than "bash" or "python". Match the label to what your readers call this type of content.
  • Keep the label short. Code block labels have limited display space. Labels over 20 characters may be truncated depending on the reader's screen size.
  • Test after saving. Open an article on your knowledge base site and confirm the new label appears correctly across different code block types before publishing to readers.
  • Consider per-block labels for technical audiences. If your readers are developers who need to see the exact language, use Document360's built-in custom label feature on individual code blocks instead of this site-wide CSS override. Navigate to the code block in the editor, select Custom from the language dropdown, click the Edit icon, and enter a title for that block only.
Related articles