Markdown | Perplex Theme

Docs
›
TL;DR
Markdown Layout
Samples of Hugo’s extended CommonMark syntax to give a quick impression of the layout capabilities.
Docs
›
Intro
Markdown
Markdown has become the favored markup language to structure text files. With good cause: Markdown syntax is simple.
Docs
›
Basic
Text Headings
Headings introduce and order the segments on a page. We can modify headings only visually to adhere to a strict HTML hierarchy while enhancing the design.
Docs
›
Basic
Paragraphs
Paragraphs are the essential building blocks of text. A comfortable line length and surrounding whitespace contribute to their legibility.
Docs
›
Basic
Line Break
Sometimes we like to begin a new line without starting a whole new text block. Placing such a hard-line break gets complicated when hard-line wraps control the line length inside our Markdown files.
Docs
›
Basic
Emphasis
We have two types of emphasis to accentuate segments of our content: Light emphasis or strong emphasis. And we can nest both types.
Docs
›
Basic
Quote
To quote someone means to recognize her or his thoughts as part of our own. We may agree or disagree, but we should refer to them correctly.
Docs
›
Basic
Simple List
A simple list is unordered and groups a set of related items. Any item may contain a sub-list.
Docs
›
Basic
Ordered List
Ordered lists group related items and mark them with ascending counters. They provide a very clear structure for a relatively short number of items.
Docs
›
Basic
Code
The main text column offers space for 80 characters of code in one line. When we need 120 to fit in one line, we can choose to additionally use the marginal column.
Docs
›
Basic
Horizontal Rule
Sometimes the separation of page segments by space is not clear enough. Then we can add this layout element as an explicit visual separation.
Docs
›
Basic
Links
Internet references or short “links” are the binding fabric of the web. Markdown encourages their use by providing a few
simple markup options.
Docs
›
Basic
Image
The CommonMark image syntax is simple and the theme additionally distinguishes between two possible image positions: stand-alone & embedded.
Docs
›
Basic
Special Characters
All available characters are valid Markdown. The following sections are about the special ones we can’t use directly.
Docs
›
Extended
Definition List
Definition lists consist of terms as list markers, which are associated with details in the list entries.
Docs
›
Extended
Footnotes
Footnotes are best suited for (formal) information, which is not essential for the meaning of the text.
Docs
›
Extended
Tables
Markdown tables need some care, because their layout breaks, when the content of one row exceeds the available width.
Docs
›
Extended
Strike-through and Insertion
Correction marks highlight changes while working on a draft. Lately, strike-through has also become a hip visual style.
Docs
›
Extended
Task List
A task list on a web page should be an interactive element which directly changes the corresponding Markdown. A theme can’t establish such a connection on its own.
Docs
›
Extended
Typographer
Simple ASCII punctuation characters are substituted with the typographic correct ones.
Docs
›
Extended
GoAT
GoAT renders ASCII diagrams as SVG and is a Golang implementation of Markdeep’s ASCII renderer.
Docs
›
Improved
›
Image
Extended Image Syntax
To alter the appearance we can pass additional parameters.
Docs
›
Improved
›
Image
Stand-alone Image
This page demonstrates the layout for advanced stand-alone images. For the Markdown syntax see basic image and extended image. Tiny Tiny ¼ 1. Tiny figure(gm) “Who am taking the ebonics quiz?”, the prof jovially axed. Few black taxis drive up major roads on quiet hazy nights. Vamp fox held quartz duck just by wing. Sex-charged fop blew my junk TV quiz. A quivering Texas zombie fought republic linked jewelry. Joaquin Phoenix was gazed by MTV for luck.
Docs
›
Improved
›
Image
Embedded image (float)
This page demonstrates the layout for advanced embedded images. For the Markdown syntax see basic image and extended image. At the beginning Normal size Normal ½ embedded 1. Normal size(gm) Quick zephyrs blow, vexing daft Jim. A wizard’s job is to vex chumps quickly in fog. A quick movement of the enemy will jeopardize six gunboats. Twelve ziggurats quickly jumped a finch box. Amazingly few discotheques provide jukeboxes. My girl wove six dozen plaid jackets before she quit.
Docs
›
Improved
›
Image
Image Processing
The theme relies solely on Hugo’s image-processing capabilities.
Docs
›
Improved
›
Attributes
How to use Attributes?
Hugo’s attributes are plain HTML attributes getting injected from the Markdown source into the rendered HTML.
Docs
›
Improved
›
Attributes
Boxes
There is one box for framing content like a figure. And there are four kinds of annotation boxes for important messages: Danger, warning, info, and success.
Docs
›
Improved
›
Attributes
Position & Size
When the content of a block fits nicely into a single column we can shrink & move it in the layout.
Docs
›
Improved
›
Attributes
Anchors
It’s easy to manually add anchors to any block element with an identifier attribute and to reference them with a Markdown link.
Docs
›
Improved
›
Attributes
Clear a floating element
Sometimes we want the text to stop floating around an embedded element. Then we have to place a good ol’ .clear attribute.
Docs
›
Improved
›
Attributes
Attribute Register
All element-specific attributes are listed here to provide a kind of cheat sheet.
Docs
›
Improved
›
Replacements
How to use replacements
Text enclosed by curly braces { and } and special ASCII signs is replaced with missing Markdown tags after rendering. x{‍^3} for example gets turned into x³.
Docs
›
Improved
›
Replacements
Super-, Subscripts and Fractions
For occasional vertically shifted characters, these replacement codes are sufficient.
Docs
›
Improved
›
Replacements
Mark
Mark and highlight inline text as especially important.
Docs
›
Improved
›
Replacements
Keyboard Legend
Refer explicitly to keyboard strokes in your text.
Docs
›
Improved
›
Replacements
Referencing the work of others
This replacement code wraps the HTML <cite> tag around the marked content.
Docs
›
Improved
›
Shortcodes
Marginal Note
A marginal note contains additional important but nonessential information. It explains some context, sheds light on a detail or speculates on a given topic etc.
Docs
›
Improved
›
Shortcodes
Figure
Because no Markdown element corresponds to the complex HTML <figure> tag, this shortcode was the solution for stand-alone images.
Docs
›
Plugins
LaTeX
LaTeX is the most popular typesetting system for the natural sciences. The syntax has been established as a quasi-standard for complex mathematical formulas in print and web layouts.
Docs
›
Plugins
Mermaid
Mermaid is a popular Javascript library creating SVG diagrams from text and code descriptions.
Docs
›
Plugins
Kroki
Generate SVG diagrams with the Kroki service by writing textual diagram descriptions into Markdown code blocks.
Docs
›
Appendix
›
Config
markup.yaml
Markdown configuration file in config/_default
Docs
›
Appendix
replacements.html
This template file from the module hugo-mod-replacements contains the regular expressions for all replacement codes.
Docs
›
Appendix
Example Punctuation Keymap
Punctuation Keymap of the German Keyboard Layout for Ubuntu.
Blog
•
Markdown
Mar 27, 2023
Stand-alone Image Layout
This page demonstrates the layout for advanced stand-alone images.
Blog
•
Markdown
Mar 23, 2023
Embedded image (float)
This page demonstrates the layout for advanced embedded images.
Blog
•
Markdown
Nov 1, 2022
Code Block Layout Demo
On large screens, code blocks expand into the margins as long as possible and may include up to 160 characters in one line.
Blog
•
Markdown
Aug 27, 2022
Nested Definition List
A definition list inside a blockquote with a sub-list in one of its items is an interesting problem for Markdown layout.
Blog
•
Markdown
Jul 4, 2022
The Beauty of Marginal Notes
Marginal notes add further information elegantly and unobtrusively. We can add them with the shortcode mnote.