The source code editor lets you edit the HTML source of articles and content blocks for the help center. This lets you customize and style help center content in ways that aren't possible using the standard WYSIWYG editor.
Edit the article source code
You can customize your help center articles by using the article source code editor to edit the HTML of your articles.
- In the help center or Guide admin, create or edit an article or content block.
- In the article or content block, click the source code icon () on the toolbar.
- In the source code editor, create or edit the source code you want to use. See Supported HTML for help center articles for a list of supported elements.
- Click Apply to save your edits and close the source code view.
Clean up styles in the article source code
When you copy and paste content from an HTML page into your help article, you may bring along undesired styles that clutter your article source code and compromise the consistency of your help center. You can use the Clean up styles button in the Source code editor to strip out any inline styles that are not essential for the article editor to work. The Clean up styles button does not affect CSS classes or theming, nor does it affect inline styles that are necessary for the article editor (for example, font foreground and background and table cell heights and widths).
- In the help center or Guide admin, create or edit an article or content block.
- In the article or content block, click the source code icon () on the toolbar.
The source code editor opens, displaying all code and inline styles.
- In the source code editor, click Clean up styles.
The unsupported inline styles are removed from the source code view.
- Click Apply to save your edits and close the source code view.
- Click Save to save your changes.
Important considerations when editing source code
Empty HTML container elements
Zendesk automatically removes most empty container elements, such as i
or span
. These elements typically must contain content to be rendered.
Zendesk doesn't remove empty p
tags. Instead, Zendesk inserts
as the element's content. Example:
<p> </p>
Unsafe HTML
By default, Zendesk considers the following HTML elements to be unsafe.
applet, button, embed, form, input, object, script, textarea, style
Handling unsafe HTML in articles
For articles, the source code editor doesn't remove unsafe HTML elements or unsupported HTML attributes. Instead, they're excluded in the HTTP responses used to render the help center articles. As a result, articles might not render as intended.
Allowing unsafe HTML in articles
You can override the default setting to allow unsafe HTML in help center articles.
Warning: Making this change will allow potentially malicious code to be executed when users open an article in a browser.
To allow unsafe HTML in HTTP responses
- In Guide, click the Settings icon () in the sidebar.
- Under Security, select the Display Unsafe Content option.
- Click Update.
Handling unsafe HTML in content blocks
For content blocks, the source code editor removes unsafe HTML elements and unsupported
attributes. The content inside an unsafe element is placed in a p
element as described in Unknown HTML.
Unknown HTML
HTML elements that are not supported are considered unknown. Unsupported HTML is handled differently, based on whether you are editing a content block or a help center article.
If you're editing a content block, HTML blocks recognize unsupported content and wrap it in an HTML block. You can click the HTML block in the content block editor to open a source code editor that only displays the code for that block. You can use this focused view to manipulate the HTML for your selected content without scrolling through the source code for the entire content block. See Using HTML blocks to edit code in content blocks.
mytag
element.<mytag>Hello world!</mytag>
In the HTTP responses used to render the help center, the mytag
element
is removed. Its content is instead placed in a p
element.
<p>Hello world!</p>
Styling HTML in help articles
Where possible, Zendesk recommends the class
attribute and related CSS
classes to style HTML in help center articles. The CSS classes should be defined in the
help center theme. For more information, see Customizing your help center theme.
When creating CSS rules for your help center theme, avoid using nested selectors, such as
div.container > p > img
. Such rules are difficult to maintain and can
target unintended elements. Instead, use selectors that directly style a class, such as
.container-image
. Then directly add the class to affected HTML elements
using the class
element. For example: <img
class="container-image" ...>
Avoid using the style
attribute to apply inline styling to HTML
elements. Inline styling is difficult to maintain and can result in inconsistent
styling.