Troubleshooting formatting issues in the new article editor

<p>When you move your help center articles to the new article editor, you might see format issues such as extra spaces, bullet lists that change to numbers, or headings that lose their styles. This article covers common format problems after you switch editors and how to fix them.</p><p>This article contains the topics below:</p><div style="margin-bottom: 20px; text-align: right;">
<button id="master-toggle" class="btn fw-semibold text-dark" data-action="expand" style="background-color: #DEF991; border: none; outline: none; border-radius: 7px; padding: 10px 20px; font-size: 15px; transition: background-color 0.2s ease;" onmouseover="this.style.backgroundColor='#cbef6d'" onmouseout="this.style.backgroundColor='#DEF991'">
Expand all tabs
</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const toggleBtn = document.getElementById('master-toggle');

toggleBtn.addEventListener('click', function () {
const action = this.getAttribute('data-action');
const headers = document.querySelectorAll('.accordion');

headers.forEach(header => {
const isActive = header.classList.contains('active');
const panel = header.nextElementSibling; // Grabs the corresponding .panel container

if (action === 'expand' && !isActive) {
// Open it by simulating a standard click
header.click();
} else if (action === 'collapse' && isActive) {
// Close it by simulating a standard click
header.click();
}
});

// Flip button text and states
if (action === 'expand') {
this.setAttribute('data-action', 'collapse');
this.textContent = 'Collapse all tabs';
} else {
this.setAttribute('data-action', 'expand');
this.textContent = 'Expand all tabs';
}
});
});
</script><div class="accordion"><h3 id="h_01K9WFZWMHFQMTNAE12TD7E8R9">Issue: Extra spaces and line breaks</h3></div><div class="panel">
<p>To fix this:</p>
<ol>
<li data-list-item-id="e741db12f7fa1a6ce009bf9faa980518f">Review your articles for extra spaces or blank lines, especially between paragraphs, lists, and headings</li>
<li data-list-item-id="e900a264a45a9782a8fa3a0c84d727f83">Open the article in the new article editor</li>
<li data-list-item-id="eaed68f762089684adb520c210cb419b5">Click the <strong>Source code </strong>icon from the toolbar<br><strong><img class="wysiwyg-image-resized" style="aspect-ratio: 1316/648; width: 55.68%;" src="https://support.zendesk.com/hc/article_attachments/10569894506778" alt="HTML code editor in article.png" width="1316" height="648"></strong>
</li>
<li data-list-item-id="e9a406722566b1dc8150e8552988a3de1">Remove unnecessary &lt;br&gt; tags or extra spaces, especially inside lists or near headings</li>
<li data-list-item-id="e5f97907ec3963f7ba77279a5e25a12d9">Save and preview the article to confirm the issue is resolved</li>
</ol>
</div><div class="accordion"><h3 id="h_01K9WFZWMNRK198EQSXH4WHYW7">Issue: Bullet lists &lt;ul&gt; display as numbered lists</h3></div><div class="panel">
<p>Reason: Your theme CSS overrides the default style.</p>
<p>To fix this:</p>
<ol>
<li data-list-item-id="e4a4304f640093c19b064bbd56fe4a83d">Go to <strong>Knowledge admin</strong> &gt; <strong>Customize design</strong> &gt; <strong>Customize </strong>&gt; <strong>Edit code</strong> &gt; <strong>style.CSS</strong><br><img class="wysiwyg-image-resized" style="aspect-ratio: 1269/1199; width: 48.41%;" src="https://support.zendesk.com/hc/article_attachments/10569901674778" alt="Customize live theme.png" width="1269" height="1199">
</li>
<li data-list-item-id="e98dc75bde942990b49ed22da4c8f26eb">Inspect your CSS for rules such as <code>ul { list-style-type: decimal; }</code>
</li>
<li data-list-item-id="e2af40278902f3b2b0498f73ef10cd9ee">Change or add <code>ul { list-style-type: disc; }</code>
</li>
<li data-list-item-id="eab6a404c6c227826209fe9b9643ca77d">Use the <strong>Preview</strong> feature to check the final format before you click <strong>Publish</strong>
</li>
</ol>
</div><div class="accordion"><h3 id="h_01K9WFZWMSZW0JZXHMN6VD716Q">Issue: Nested and multi-level don’t display correctly</h3></div><div class="panel">
<p>Reason: The new article editor doesn’t natively support mixed-style nested lists. For example, numbers for the first level and letters for the second, in the editor UI.</p>
<p>To fix this, update your theme CSS to create custom nested number styles in published articles.</p>
<p>Add CSS such as:</p>
<pre class="language-auto">ol {
counter-reset: item;
padding-left: 10px;
}
li {
display: block;
}
li:before {
content: counters(item, ".") " ";
counter-increment: item;
}</pre>
<div class="note tip">
<span class="tiptitle">Tip:</span> Use the <strong>Preview</strong> feature every time to check the final format before you save and publish.</div>
<p>In the editor, nested lists might show a uniform number style, but the published view restores the correct hierarchy (numbers, letters, Roman numerals). A custom number style might not appear in the editor preview unless you insert CSS in the article source, which isn't recommended for maintenance reasons.</p>
</div><div class="accordion"><h3 id="h_01K9WFZWMYZVVNKJGF8YQFWNEK">Issue: Heading formats go missing or reset after you press Enter</h3></div><div class="panel">
<p>To fix this:</p>
<ol>
<li data-list-item-id="e8eb818695b4227117572910e0a4d98c6">Open the article in the new article editor</li>
<li data-list-item-id="e9e7f46f23ed004395a743bba987ff7dc">Refresh your browser and clear the cache</li>
<li data-list-item-id="e4f8cd84c57cb4b16c8ecdb10cc733b82">Contact <a href="https://support.zendesk.com/hc/en-us/articles/4408843597850-Contacting-Zendesk-Customer-Support" target="_blank" rel="noopener noreferrer">Zendesk Customer Support</a> for further help.</li>
</ol>
</div>