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.
Important considerations when editing source code
Empty HTML container elements
Zendesk automatically removes most empty container elements, such as
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:
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
element as described in 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.
In the HTTP responses used to render the help center, the
is removed. Its content is instead placed in a
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
class element. For example:
Avoid using the
style attribute to apply inline styling to HTML
elements. Inline styling is difficult to maintain and can result in inconsistent