Text markup parser
The content, description and excerpt fields feature a parsed version: {{content_parsed}}
, {{description_parsed}}
and {{excerpt_parsed}}
which should be used in the design templates.
Below you find the gist of the available options. Please consult your designer for details, as the implementation partly depends on css.
Basic markup of text
- Paragraphs appear automatically after a blank row.
- Headers are generated by starting a new row with hashtags, the amount depending on the level you need (h1 ~ h6): 1 to 6 hashtags.
- Lists are made by starting a row with a list-token followed by a space. There are 3 list tokens which can be targeted individually by CSS. -, + and *. (ClassName ‘minuses’, ‘pluses’ and ‘stars’ respectively.)
- Ordered lists are created by starting with a number followed by a dot and a space. Ordered lists are automatically ordered, but they start with the first number you put at the beginning, so you can continue a numbered list further down on the page.
Markup links in your text
Markdown defines 3 ways to markup links in your text to which Peatcms adheres, with an added option especially for e-mail links.
Simple link
Surround the link by pointy brackets, it will appear as a clickable link in the text, e.g. <https://peatcms.com>
becomes https://peatcms.com.
Inline link
Surround the text you want to be clickable with square brackets. Follow up with the actual link and a title between regular brackets. The title must be enclosed by neutral double quotes.
[Great stuff](https://peatcms.com "Peatcms is great stuff")
becomes Great stuff
Reference link
Inline links are long and can make the text in the editor difficult to read, therefore you can also reference the link in the text, like so: [Great stuff][p]
where [p]
is the reference to your link elsewhere in the text, for instance at the bottom. Just start a new row with [p]:
Blahblah [Great stuff][p] more blahblah. Some more paragraphs. [p]: https://peatcms.com "Reference links are cool"
Result: Blahblah Great stuff more blahblah.
You can reference the same link multiple times in the text. Of course, the id must be UNIQUE to the text.
E-mail link
To prevent e-mail harvesting by spam bots it is best not to put mailto links directly on your website. Peatcms handles this client-side, so there is no actual link in the source code ever. Surround your e-mail link by @ signs and replace the actual @ by -at- and all dots by -dot-.
@nospam-dot-admin-at-peatcms-dot-com@
becomes nospam-dot-admin-at-peatcms-dot-com
Bold, italic, etc.
If you want (part of) a paragraph bold or italic you have to surround it with the appropriate characters, based on the Whatsapp interface (not Markdown).
- Bold: * (
*bold*
becomes bold). - Italic: _ (
_italic_
becomes italic). - Strikethrough: ~ (
~oops~
becomesoops). - Extra option 1: ^ (className peatcms-circ).
- Extra option 2: ¤ (className peatcms-curr).
Markup quotes and code
To create a blockquote (how it looks depends on your design) start every line with greater than followed by a space. (> ).
To create a code block start a paragraph with three backticks (```). A small piece of code inline in a paragraph can be surrounded by single backticks (`blahblah` becomes blahblah
).
Word wrap
Peatcms makes handling word wrapping in your text breezy. Surround parts that should not be wrapped by = signs (e.g. =€ 5,00=
, € 5,00). When you have a long word that breaks your layout on some resolutions you can suggest breaking points to the browser with pipe characters (|). When necessary the browser will break the word with a hyphen at one of those places. E.g. super|cali|fragi|listic|expi|ali|docious
(supercalifragilisticexpialidocious).
Images
Not available yet.
Escape
Sometimes you may want to use one of the markup commands in your text. In such a case have the command precede by the standard escape character: backslash (\). For instance, you write:
1984\. What a great year.
To get:
1984. What a great year.
Without the backslash Peatcms will think you are starting an ordered list.