Help center editor toolbar reference

<body>
<p id="docs-hc-snippet" style="display: none;">The help center editor provides toolbars and shortcuts that you can use to format your articles andcontent blocks. This is not the same editor that is used in community posts.</p>
<div class="article-banners">
<div id="docs-wmp-link">
<a href="https://support.zendesk.com/hc/en-us/articles/5411234991258-plan" rel="noopener" target="_blank">What's my plan?</a>
</div>

<div class="article-banner" id="suite_all">
<table>
<tbody>
<tr>
<td>
<strong>All Suites</strong>
</td>
<td>Team, Growth, Professional, Enterprise, or Enterprise Plus</td>
</tr>
</tbody>
</table>
</div>

<div class="article-banner" id="support_with_guide_all">
<table>
<tbody>
<tr>
<td>
<strong>Support with</strong>
</td>
<td>Knowledge Professional or Enterprise</td>
</tr>
</tbody>
</table>
</div>

</div>
<div id="docs-ai-summary">
<p id="docs-ai-summary-toggle">Summary: <span id="up-triangle">◀</span><span id="down-triangle">▼</span></p>
<p id="docs-ai-summary-content">This article is a toolbar reference for the help center article editor. You can use it to format text, add links, images, tables, lists, code blocks, callouts, accordions, tabs, embeds, and HTML blocks, plus insert AI-generated article summaries and use Copilot writing help. It also covers shortcuts and content block formatting with Markdown.</p>
</div>

<div class="body">

<p class="p">The help center editor provides toolbars and shortcuts that you can use to format your articles
and <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408832857754-Creating-and-inserting-reusable-information-with-content-blocks" target="_blank">content blocks</a>. This is not the same editor that is
used in community posts. </p>
<p class="p">You can also format content blocks with Markdown, a simple markup language that you can use
to add formatting to plain text. See <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408846544922-Formatting-text-with-Markdown" target="_blank">Formatting text with Markdown</a>.</p>
<p class="p">The following image shows the help center editor toolbar. </p>
<p class="p"><img class="image" id="topic_itz_qhj_yy__image_h2q_yp5_bfc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide-new-art-editor-toolbar-ga.png" width="800"></p>
<p class="p">The following table describes the toolbar options that are available for the help center
editor.</p>
<div class="tablenoborder">
<table border="1" cellpadding="4" cellspacing="0" class="table" frame="border" id="topic_itz_qhj_yy__table_v3b_xjx_4y" rules="all" summary="">
<colgroup>
<col style="width:24.330900243309006%">
<col style="width:26.520681265206818%">
<col style="width:49.14841849148419%">
</colgroup>
<thead class="thead" style="text-align:left;">
<tr class="row">
<th class="entry nocellnorowborder" id="d87e64" style="text-align:left;vertical-align:top;">Toolbar button</th>
<th class="entry nocellnorowborder" id="d87e67" style="vertical-align:top;">Name</th>
<th class="entry cell-norowborder" id="d87e70" style="vertical-align:top;">Action</th>
</tr>
</thead>
<tbody class="tbody">
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;"><img class="image" id="topic_itz_qhj_yy__image_swz_vm4_sbb" src="https://zen-marketing-documentation.s3.us-west-1.amazonaws.com/docs/en/guide-toolbar-heading.png" width="30"></td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Heading selector</td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">Select the HTML heading you want to apply to the text.</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;"><img class="image" id="topic_itz_qhj_yy__image_arv_zbp_hwb" src="https://zen-marketing-documentation.s3.us-west-1.amazonaws.com/docs/en/guide-toolbar-choose-formatting.png" width="40"></td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Formatting selector</td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">Select the formatting that you want to apply to the text (bold, underline,
italic, or block quote).</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;"><img class="image" id="topic_itz_qhj_yy__image_cmr_bsx_4y" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/wysiwyg_B.png" width="25"></td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Bold</td>
<td class="entry cell-norowborder" headers="d87e70" style="text-align:char;vertical-align:top;">Bold or unbold text.</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;"><img class="image" id="topic_itz_qhj_yy__image_p2p_jlj_yy" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide-cb-editor-underline-tool.png" width="20"></td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Underline</td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">Underline or remove underline from text.</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;"><img class="image" id="topic_itz_qhj_yy__image_er3_csx_4y" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/wysiwyg_I.png" width="25"></td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Italic</td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">Italicize or remove italics.</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;"><img class="image" id="topic_itz_qhj_yy__image_xzq_sgc_psb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide-block-quote-icon.png" width="25"></td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Block quote</td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">Apply block quote styling to text. Block quotes are set apart from
the main text as a paragraph with visual styling.</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;"><img class="image" id="topic_itz_qhj_yy__image_qw1_4k4_sbb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide-editor-text-size-tool.png" width="45"></td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Size selector</td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">Increase or decrease font size.</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;"><img class="image" id="topic_itz_qhj_yy__image_bjv_rmj_yy" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide-editor-text-color-tool.png" width="45"></td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Text color selector</td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">Change text color using the color selector.</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;"><img class="image" id="topic_itz_qhj_yy__image_xtc_4vp_dwb" src="https://zen-marketing-documentation.s3.us-west-1.amazonaws.com/docs/en/guide-toolbar-text-background.png" width="50"></td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Text background color selector</td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">Change text background color using the color selector.</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;"><img class="image" id="topic_itz_qhj_yy__image_wzx_wpj_yy" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide-cb-editor-table-tool.png" width="45"></td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Table</td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">
<a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408829307418" target="_blank">Create or modify tables</a> using the menu options.<p class="p">See <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408829307418#topic_jjz_ny3_cfc" target="_blank">Using the table formatting tools</a></p>
</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;"><img class="image" id="topic_itz_qhj_yy__image_gz3_wgc_psb" src="https://zen-marketing-documentation.s3.us-west-1.amazonaws.com/docs/en/guide-toolbar-codeblock.png" width="28"></td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Code block</td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">Creates a block of pre-formatted code. Each code block is assigned a specific
programming language and supports basic editing tools (for example, changing the line
indentation).</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;"><img class="image" id="topic_itz_qhj_yy__image_iz3_wgc_psb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide-cb-editor-codeblock-selector.png" width="25"></td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Code block type selector</td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">Select or change the programming language that you want to apply to the code
block. </td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;"><img class="image" id="topic_itz_qhj_yy__image_sc1_gsx_4y" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/wysiwyg_bulleted.png" width="25"></td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Bulleted list</td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">Create or remove a bulleted list.</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;"><img class="image" id="topic_itz_qhj_yy__image_wv3_hsx_4y" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/wysiwyg_numbered.png" width="25"></td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Numbered list</td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">Create or remove a numbered list.</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;"><img class="image" id="topic_itz_qhj_yy__image_zsv_w4j_yy" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide-editor-text-align-tool.png" width="45"></td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Align/indent selector</td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">Align text left, center, or right; indent or outdent text.<p class="p"><img class="image" id="topic_itz_qhj_yy__image_ssm_lfp_hwb" src="https://zen-marketing-documentation.s3.us-west-1.amazonaws.com/docs/en/guide-ccb-text-align.png" width="175"></p>
</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;"><img class="image" id="topic_itz_qhj_yy__image_qx4_msx_4y" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/wysiwyg_link.png" width="25"></td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Insert/edit link</td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">Create or edit a link and link text. You can link to a URL, heading
in the article, or another article. See <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408822378266" target="_blank">Inserting links</a>.</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;"><img class="image" id="topic_itz_qhj_yy__image_yvp_jpj_yy" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide-cb-editor-image-tool.png" width="25"></td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Insert image</td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">
<a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408824620698" target="_blank">Insert an image</a> using the file browser. The
image file size limit is 20 MB.<p class="p">See <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408824620698#topic_ssg_g2q_cfc" target="_blank">Working with the image editing tools</a>.</p>
</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;"><img class="image" id="topic_itz_qhj_yy__image_hpk_mr5_bfc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide-content-blocks-icon.jpg" width="25"></td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Insert content block<p class="p">(Enterprise plans only)</p>
</td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">Insert a content block into the article. See <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408832857754" target="_blank">Creating and inserting reusable information with content
blocks</a>. </td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;"><img class="image" id="topic_itz_qhj_yy__image_mg1_mcn_s1c" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide-genai-ico.png" width="40"></td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Enhance writing (requires the <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/5524125586330" target="_blank">Copilot add-on</a>)</td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">Use <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/6267360002714" target="_blank">generative AI</a> to enhance the selected content
(expand, simplify, make more friendly, or make more formal).</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;"><img class="image" id="topic_itz_qhj_yy__image_t4s_xr5_bfc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/Article-components-button.png" width="40"></td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Article components</td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">Select the component that you want to add to your article.</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;">Embed</td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Embed external content</td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">Select the video or external interactive element that you want to embed in your
article. See <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408829384986" target="_blank">Inserting videos and embedded files in articles and
content blocks</a>.</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;">Summary</td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Insert AI-generated article summary</td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">(Articles only) Insert an article summary component to display a concise
description of the article content in a shaded box at the top of your article.</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;">HTML block</td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Insert HTML block </td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">Use <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/6739380623770" target="_blank">HTML blocks</a> to quickly access and edit complex
HTML code in your articles. </td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;">Horizontal line</td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Insert a horizontal line</td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">Add a horizontal line to your article to help divide your content.</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;">Callout</td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Inserts a callout component</td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">Add a callout to highlight key information with a styled note. Supported callout
types include Info, Warning, Error, and Tip. See <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/11042727986330" target="_blank">Using callouts to highlight content in the article editor</a>. </td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;">Accordion</td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Inserts an accordion component</td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">Adds an accordion component to collapse sections readers can expand on demand.
See <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/11042696237850" target="_blank">Using accordions to create expandable and collapsible
sections in the article editor</a>.</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d87e64" style="text-align:left;vertical-align:top;">Tabs</td>
<td class="entry nocellnorowborder" headers="d87e67" style="vertical-align:top;">Inserts a tabs component</td>
<td class="entry cell-norowborder" headers="d87e70" style="vertical-align:top;">Adds a tabs component to allow users to switch between grouped content in one
space. See <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/11042740425754" target="_blank">Using tabs to group content in the article
editor</a>.</td>
</tr>
<tr class="row">
<td class="entry row-nocellborder" headers="d87e64" style="text-align:left;vertical-align:top;">
<p class="p">HTML</p>
</td>
<td class="entry row-nocellborder" headers="d87e67" style="vertical-align:top;">Source code</td>
<td class="entry cellrowborder" headers="d87e70" style="vertical-align:top;">View or <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408824584602" target="_blank">edit the HTML source code</a>.<div class="p">
<div class="note" id="topic_itz_qhj_yy__note_qwf_ncz_k1c">
<span class="notetitle">Note:</span> You can use <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/6739380623770" target="_blank">HTML blocks</a> to work with unsupported source code in
content blocks.</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script id="docs-schema-markup" type="application/ld+json">{
"@context": "https://schema.org",
"@type": "TechArticle",
"@id": "https://support.zendesk.com/hc/en-us/articles/4408839186586",
"url": "https://support.zendesk.com/hc/en-us/articles/4408839186586",
"headline": "Help center editor toolbar reference",
"description": "You use the help center editor toolbar to format articles and content blocks, insert links, images, tables, components, embeds, and edit HTML or source code.",
"articleSection": "Working with articles in the knowledge base",
"datePublished": "2021-10-16T05:35:41+00:00",
"dateModified": "2026-07-30T12:21:22.716460+00:00",
"inLanguage": "en",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://support.zendesk.com/hc/en-us/articles/4408839186586"
},
"author": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"publisher": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"isPartOf": {
"@type": "WebSite",
"name": "Zendesk Help",
"@id": "https://support.zendesk.com/hc/"
},
"about": {
"@type": "SoftwareApplication",
"name": "Zendesk",
"@id": "https://www.zendesk.com",
"softwareAddOn": {
"@type": "SoftwareApplication",
"name": "Knowledge",
"@id": "https://support.zendesk.com/hc/en-us/sections/4405298860954"
}
}
}</script><script id="ai-summary-script">
//<![CDATA[
const ai_summary_style = document.createElement('style');
ai_summary_style.innerHTML = `#styled-article-body{padding:0 0 0}#article-body #docs-ai-summary{background-color:#f3f3f3;border:1px solid #d3d3d3;padding:10px 10px 6px;margin-bottom:16px}#article-body #docs-ai-summary #docs-ai-summary-toggle{font-size:.9em;font-weight:700;margin-bottom:4px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}#article-body #docs-ai-summary #docs-ai-summary-toggle #up-triangle{margin-left:auto;padding-right:10px;display:none}#article-body #docs-ai-summary #docs-ai-summary-toggle #down-triangle{margin-left:auto;padding-right:10px}#article-body #docs-ai-summary #docs-ai-summary-content{font-size:.9em;padding-left:25px;padding-right:25px;margin-bottom:12px}`;
document.head.appendChild(ai_summary_style);

const toggleAISummary = () => {
const summary = document.getElementById("docs-ai-summary-content");
const upTriangle = document.getElementById("up-triangle");
const downTriangle = document.getElementById("down-triangle");
if (summary.style.display === "none") {
summary.style.display = "block";
upTriangle.style.display = "none";
downTriangle.style.display = "inline";
} else {
summary.style.display = "none";
upTriangle.style.display = "inline";
downTriangle.style.display = "none";
}
};

document.getElementById("docs-ai-summary-toggle").addEventListener("click", toggleAISummary);
//]]>
</script>
</body>