--- title: "How to change the language name text in code blocks" slug: "how-to-change-the-language-name-text-in-code-blocks" description: "You would want to keep a constant name, like Example, Sample code, etc., as language name text for code blocks. By default, the respective language name appears in the code blocks. " tags: ["Customization"] updated: 2026-06-20T09:42:29Z published: 2026-06-20T09:42:29Z canonical: "docs.document360.com/how-to-change-the-language-name-text-in-code-blocks" --- > ## 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. # How to change the language name text in code blocks 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](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Custom%20css%20&%20js.png) 2. From the left navigation pane, select the **CSS** tab and paste the following CSS snippet: ```css 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; } ``` 3. Replace `"Example"` with your desired label text, for example, `"Sample code"`, `"Command"`, or your product name. 4. Click **Save**. ![CSS tab showing the custom label snippet saved in the Custom CSS and JavaScript panel](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1766998756574.png) --- ## 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.