Insert a table of contents in knowledge articles

  • Release version: Yokohama
  • Updated January 30, 2025
  • 2 minutes to read
  • Insert a hierarchical table of contents (toc) based on the headings in your knowledge article.

    Before you begin

    Open the knowledge article in which you want to use the HTML editor.
    Note:
    If your article uses a custom template, you may need to create the table of contents manually using the anchor option in the HTML Toolbar and editing the source code.

    Role required: none

    About this task

    You can also use the HTML editor when creating or editing a knowledge article using the Knowledge Management application in the ServiceNow AI Platform interface or in Agent Workspace. To create or edit a knowledge article in the ServiceNow AI Platform interface, see Create a knowledge article or Edit a knowledge article. To create or edit a knowledge article in Agent Workspace, see Create a knowledge article in Agent Workspace or Edit a knowledge article in Agent Workspace.
    You can generate a table of contents only if your article uses heading levels from Heading 1 to Heading 3 and is a standard article.
    Note:
    Use Format select to set heading levels in the article. You can also configure the HTML toolbar using TinyMCE attributes. For more information, see Customize TinyMCE attributes. HTML toolbar

    Procedure

    1. In the Article body section, place the cursor where you want to insert the table of contents.
    2. Select the table of contents icon (Table of Contents icon) on the HTML toolbar.
      If you do not see the table of contents icon on the toolbar, add it using steps available in Customize TinyMCE attributes.
    3. Optional: Update an existing table of contents by selecting it and then selecting the update icon (Update icon) on the HTML toolbar.
    4. Optional: The TOC font defaults to Verdana 8pt, but for those comfortable working in source code, you can edit the default by selecting the source code icon in the HTML Toolbar and changing the font size manually.
      In the following example, the font size is set to 12pt.
      <div id="mce_14" class="mce-toc" style="font-size: 12pt;">
      <h2>Table of Contents</h2>
      <ul>
      <li><a href="#mcetoc_1jommnuho99">KB Article</a>
      <ul>
      <li><a href="#mcetoc_1jommnuho9a">First section</a></li>
      <li><a href="#mcetoc_1jommnuhp9b">Second Section</a></li>
      <li><a href="#mcetoc_1jommnuhp9c">Third Section</a></li>
      <li><a href="#mcetoc_1jommnuhp9d">Fourth Section</a></li>
      </ul>
      </li>
      </ul>
      </div>

    Result

    The HTML editor searches for the headings in your content including their levels (such as Heading 2 or Heading 3). It then automatically generates a table of contents that contains links to the heading levels from Heading 1 to Heading 3 only. The links to heading levels are indented to show the heading hierarchy.
    Note:
    To add any additional links, use the anchor option in the HTML Toolbar.