Automatically Adding Colored Notes in Articles Based on Article Keyword

In our Zendesk, we use colored notes in articles to help call out important pieces of information. We would manage this by adding classes to blockquotes in order to tell the Help Center to color those blockquotes a certain way.  I wanted to try to make this a little easier so my team didn't have to dig into the article source code to make this happen.  Below is a screenshot of some of our example comments.  These were stylized due to them having a keyword (Note:, Important:, etc) in them. 

If you just need to add a quick note, start a new paragraph and start it with one of the following keywords:

• Note:
• Important:
• FYI:
• Disclaimer:
• Tip:
• Internal Note:

Starting a paragraph with these keywords will automatically trigger colored comments and shown in the examples below. 

Considerations:

• The colon is required
• Capitalization doesn't matter
• The keyword can be anywhere in a paragraph to trigger the colored note
• This will not work for lists.  You can only do one paragraph at a time starting with the keyword. If you look at the source code these will be wrapped in <p> </p> tags

Setting up your theme

Update CSS

Add the following code at the end of your CSS file or create your own styles with your own format. Just make sure you have a defined class created for your colored note.

Update JS

Add the following code after $(document).ready(function() { 

If you want to color tags other than <p> tags you can change p:contains to reflect other elements like blockquote:contains. 

If you want to use different trigger words. Update the word in quotes following p:contains.  

If you have different class names. Update the world in quotes following addClass.

Save and publish your theme and when you add a new paragraph that includes your keywords, it will automatically style for the viewer.  

Internal Notes

You may notice that Internal Notes are one of our options.  All I'm doing is hiding content here that can be exposed in your page source.  If you have concerns with someone seeing information that shouldn't be seen, you would not want to use the Internal Note option and you could delete lines 136 and down from my screenshot under the JS header.