When editing articles, you are free to type content in yourself, work from the
Article Templates
, or use some of the built in snippets.
Snippets are predefined blocks that can help you add style or various components to your articles in a consistent way.
Clicking on the Insert Snippet icon at the top of the editor window will open the snippet selection dialog.
Shown at the left of the dialog is a list of snippets that are available. Scroll through these to see which options are available, and optionally click on some to see a sample image to the right of how the snippet appears, along with a brief description.
In the example shown above, there is a snippet call
Example Block
that was clicked, and you can see the image below that indicates how this would look in your document.
Here is how it really appears if you selected the
Example Block
and clicked Insert:
This is an example block...
As you can see, this is a really easy way to add lots of consistent style to your articles. Keep checking the list of snippets, as we are adding more over time.
Once you have clicked the Insert button to paste the new snippet into your article, you can then edit the text to suit your needs. There are several snippets to choose from, so it makes sense to familiarize yourself with the options available.
Also, if you have one of the
Account Types
that permits
theme customization
, you can create your own CSS styles to change things like the colors of these snippets, or even create your own.
Working with Code Elements
If you need to present code fragments for your readers, there is a very helpful option to use the
Code Block
snippet which is shown below.
<div class="my-class" style="color: blue;">
<p>Sample HTML code</p>
</div>
This block allows you to insert your own code inside the block and then select the code language to use as a syntax highlighter for the code. In the example shown here, the code fragment is a piece of HTML, so the selected of HTML, XML as the syntax highlight language would be appropriate.
You don't need an exact match to the language you are presenting, but having a close match will most likely display the correct highlighting and colorization for the code being shown.
To change the code language, hover over the code block snippet in the editor window and you will see icons allowing you to change the language or delete the code block itself appear.
Note that when editing code blocks and some other snippets, they appear differently inside the editor than they do when viewed by a reader.
For example, the codeblock shown above has a gray banner above it indicating the current language selection. This gray panel is not shown outside of the editor, and also when outside of the editor, codeblocks are shown with line numbers, as shown here:
As mentioned above, and as shown in the incomplete list shown here, there are a large number of possible code languages to choose from. We recommend selecting the one that is closest to your desired language if an exact match is not shown in the list.
Differences will only be noticed in the syntax highlighting (coloring) of keywords and code fragments within the code block.
Frequently Asked Questions (FAQ) Snippet
The FAQ Block snippet is also quite helpful for when you are making a dynamic Frequently Asked Questions block on your page.
Insert the FAQ Block snippet from the insert snippet option in the toolbar and you will see a new block of content with 3 sample questions. These questions are meant to be replaced by whichever FAQs you have, but having the skeleton in the block helps visualize how these appear.
When you float your mouse or select the top of this block, you will see some additional options appear, as shown here:
If you select the
Change Display Options
button shown on the left, you can choose from one of the predefined styles to use when the FAQ block is shown to readers. Note that when you are editing, all answers are automatically expanded to allow you to easily edit them.
The
Insert New Question/Answer Above
button shown in the middle will create a new Question/Answer pair at the top of this FAQ block, allowing you to insert new questions at the top of the list if you prefer. There is a similar
Insert New Question/Answer Below
button shown when you hover over the bottom of the FAQ block, which allows you to add a new Question/Answer pair to the bottom of the list.
The
Delete FAQ Section
button on the right will delete the entire FAQ block if you no longer require it.
Each Question / Answer pair can be edited directly, allowing you to phrase your questions and answers however you like. If you wish to delete a Question/Answer pair at some point, hover over the right side of the question until a new
Delete
icon appears, as shown here:
Using the red Delete icon, you can delete the selected Question and Answer, leaving the others remaining. This can be helpful to remove a specific question and answer from your list.
