Question
How can I use the Source code () option in the help center article editor toolbar to format the text of my article?
Answer
Use the article editor toolbar of the help center to format your articles. The Source code feature lets you apply HTML tags to enrich the formatting of your text.
Find below a list of HTML tags you can use in your articles.
Blockquotes | <blockquote>block quote text here</blockquote> |
Pre-formatted text | <pre>pre-formatted text here</pre> |
Headings |
<h1>header text here</h1> (h1 biggest, h6 smallest) |
Superscript | <sup>superscript text here</sup> |
Subscript | <sub>subscript text here</sub> |
Strikethrough | <strike>strikethrough text</strike> |
Indentation |
<p style="padding-left: 30px;">Indented text here</p> (modify the # of pixels (e.g., 35px) to change the indentation amount) |
In-line code | <code>snippet here</code> |
Highlight | <mark>highlighted text here</mark> |
The screenshot below shows how the HTML above renders text in the help center.
This is not a complete list of all the HTML elements you can add to articles. However, it represents the most common use cases. If your HTML tags and attributes are not displaying correctly, you may need to adjust your settings.
For more information, see the article: Editing the source code of help center articles.
23 comments
齋藤成志
Hello Ricardo Pinto,
Regarding the HTML `strike` tag explained in the `Strikethrough` section of this page, while it works in preview, it did not function in the production environment.
<strike>strikethrough text</strike>
Since the
<strike>
tag has been deprecated in HTML5, I think it would be better to change it to something else like<del>
.In fact, when I changed it to
<del>
, it worked properly.0
Zsa Trias
Hello Jennifer,
It looks like there are two different types of double-quotes used in your code, which is why it's not working properly.
One is the straight, plain text quotes, and the other is curvy "Smart quotes" which causes the coding to break.
Can you please try re-formatting your code and use only the plain text quotes (" ") instead?
0
Jennifer P
Hey Sierra/Everyone,
Hoping someone can help me.
I tried adding the link on the home_page.hbs file like so:
<p class="hero-text">Call <a class="hero-link" href=“tel:123-456-7890”>123-456-7890</a> for Support</p>
Clicking on the link takes me to zendesk 404 error page.
Did you take any additional steps to get it to work? I've also gone to settings --> Guide Settings --> Security and checked the box for Display Unsafe Content which was suggested in another help article.
0
Sierra Collins
It only works in the edit code. I tested it in the edit code of the home page and it works.
0
Ifra Saqlain
Hi Sierra Collins,
Do the following:-
i). Open source code of an article.
ii). Write your phone number with anchor tag like this.
iii). Click OK button.
iv). Save your article which you have been edit for this.
v). Now, your number would be dial by a click.
Thanks
Team
0
Sierra Collins
Hello, how do I edit source code for a phone number within an article? So the phone number can be dialed by clicking the linked number.
0
Ifra Saqlain
Hey ,
Just do the following:
i). Copy paste the code to your script.js file. You will need to add your URLs as mentioned below.
ii). jquery CDN to document_head.hbs file.
Thanks
0
Lisa Sedlak
I have a question. How can I make it so when someone clicks on an article in a section, that it goes to another website?
0
Dave Dyson
It's likely that you're using HTML tags or attributes that are considered "unsafe". There's information this, and how to allow unsafe HTML, here: Allowing unsafe HTML in help center articles
0
Fernando Fischer
Question guys, I am trying to add border to images and add some text that will be hidden to the user but searchable to the engine, using the code snippet and inline styling, and all works just fine in the editor but not in the preview, or when I am publishing it, I am doing something wrong? thank you in advance.
0
Sign in to leave a comment.