title | description | published | date | tags |
---|---|---|---|---|
Rendering Pipeline |
Control how your content is rendered |
true |
2020-05-23 05:16:48 UTC |
The rendering pipeline defines how your content is rendered into it's final readable form.
Rendering modules are attached to a core language module. Depending on the editor used, content will go through several core rendering modules CRM. For example, using the Markdown editor will result in the content being transformed through the Markdown CRM, then by the HTML CRM modules.
Each core rendering module can consist of multiple extension rendering modules ERM. These modules extend the capabilities of the core rendering module.
![Rendering Pipeline Diagram](/assets/diagrams/diag-rendering-pipeline.jpg =1000x){.radius-7 .decor-shadow}
Each module can be enabled / disabled individually and configured in the Administration Area under the Rendering sidebar menu.
Converts Markdown content into HTML.
- Allow HTML: Enable HTML tabs in content.
- Automatically convert links: Links will automatically be converted into clickable links.
- Automatically convert line breaks: Add linebreaks within paragraphs.
- Typographer: Enable some language-neutral replacement + quotes beautification.
- Quotes style: When typographer is enabled. Double + single quotes replacement pairs. e.g. «»„“ for Russian, „“‚‘ for German, etc. {.grid-list}
Transform abbreviation words into <abbr>
tags for an expanding definition.
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
The HTML specification
is maintained by the W3C.
will result in
<p>The <abbr title="Hyper Text Markup Language">HTML</abbr> specification
is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.</p>
This module doesn't have any configurable parameters.
Convert tags into emojis.
:apple:
will produce 🍎
This module doesn't have any configurable parameters.
Automatically convert tabs into spaces for consistent indentation spacing in HTML.
- Tab Width: The number of spaces to use when converting from tabs. {.grid-list}
Generates footnote definitions.
See https://github.com/markdown-it/markdown-it-footnote
This module doesn't have any configurable parameters.
Add image dimensions to img tags.
![test](image.png =100x200)
will result in
<p><img src="image.png" alt="test" width="100" height="200"></p>
This module doesn't have any configurable parameters.
Generate visual Math / Chemical expressions from TeX expressions, using the KaTeX engine.
This module is incompatible with the Mathjax module. Only one of them should be enabled at once. {.is-danger}
- Inline TeX: Process inline TeX expressions surrounded by $ symbols.
- TeX Blocks: Process TeX blocks enclosed by $$ symbols. {.grid-list}
Generate diagrams from various textual descriptions.
The diagram type must be put on the second line, in lowercase. See https://kroki.io/#support for the full list of supported diagram types.
This module is only available from version 2.4 and up. {.is-info}
```kroki
mermaid
graph TD
A[ Anyone ] -->|Can help | B( Go to github.com/yuzutech/kroki )
B --> C{ How to contribute? }
C --> D[ Reporting bugs ]
C --> E[ Sharing ideas ]
C --> F[ Advocating ]
```
- Kroki Server: Kroki server used for image generation
- Open Marker: String to use as opening delimiter. Diagram type must be put in the next line in lowercase.
- Close Marker: String to use as closing delimiter {.grid-list}
Generate visual Math / Chemical expressions from TeX expressions, using the Mathjax engine.
This module is incompatible with the Katex module. Only one of them should be enabled at once. {.is-danger}
This module is only available from version 2.4 and up. {.is-info}
- Inline TeX: Process inline TeX expressions surrounded by $ symbols.
- TeX Blocks: Process TeX blocks enclosed by $$ symbols. {.grid-list}
Generate diagrams from PlantUML description.
- Kroki Server: PlantUML server used for image generation.
- Open Marker: String to use as opening delimiter.
- Close Marker: String to use as closing delimiter.
- Image Format: Format to use for rendered PlantUML images {.grid-list}
Transform text into subscript and superscript tags.
H~2~0
Exp^10^
will result in
H<sub>2</sub>O
Exp<sup>10</sup>
- Subscript: Enable subscript tags.
- Superscript: Enable supercript tags {.grid-list}
Convert square brackets list into HTML checkboxes.
- [ ] Item 1
- [ ] Item 2
- [x] Item 3
will result in
- Item 1
- Item 2
- Item 3
This module doesn't have any configurable parameters.
Process HTML through extension modules.
- Treat relative links as root absolute: For example, a link to foo/bar on page xyz will render as /foo/bar instead of /xyz/foo/bar.
- Open external links in a new tab: External links will have a _blank target attribute added automatically.
- Protect against XSS when opening _blank target links: External links with _blank attribute will have an additional rel attribute. {.grid-list}
Coming soon
Parse blockquotes box styling.
See https://docs.requarks.io/en/editors/markdown#blockquotes
This module doesn't have any configurable parameters.
Automatically detect programming code syntax and apply the correct code coloring classes.
This module doesn't have any configurable parameters.
Coming soon
Transform Mermaid code blocks into Mermaid diagrams.
This module is only available from version 2.3 and up. {.is-info}
This module doesn't have any configurable parameters.
Filter and strip potentially dangerous content.
- Sanitize HTML: Sanitize HTML from unsafe attributes and tags that could lead to XSS attacks.
- Allow iframes: iframes will not be stripped if enabled. (Not recommended) {.grid-list}
Create tabs to organize content.
This module is only available from version 2.4 and up. {.is-info}
See https://docs.requarks.io/en/editors/markdown#content-tabs
This module doesn't have any configurable parameters.
Convert emojis into their Twemoji equivalent (Twitter emoji design).
This module doesn't have any configurable parameters.