Perplex Theme
  • News
  • Docs
  • Blog

Category: Markdown

The Intuitive Markup Language

  • Old reprint of a classic proof by Diophantus followed by Fermat’s famous last conjecture
    • Blog

    The Beauty of Marginal Notes

    Marginal notes allow to add further information in an elegant and unobtrusive way.

    • Docs › 
    • Intro

    Markdown

    Markdown has become the favored markup language to structure text files. With good cause: Markdown syntax is relatively intuitive and can be rendered into several layout formats.

  • Newspaper page with lots of different headings
    • Docs › 
    • Basic

    Text Headings

    Headings introduce and order the segments on a page. On a website with many pages, each level should have similar importance.

  • Some paragraphs of text
    • Docs › 
    • Basic

    Paragraphs

    Paragraphs are the essential building blocks of text. Comfortable proportions and surrounding whitespace contribute to their legibility.

  • A page in a book with a lot of line breaks
    • Docs › 
    • Basic

    Line Break

    Sometimes we like to begin a new line without starting a whole new text block. To place such a hard line break gets complicated, when hard line wraps limit the line length inside our Markdown files.

  • The word “Bold” in bold letters
    • 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.

  • The quote “All ideas grow out of other ideas” written on a a large stairway
    • 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.

  • A small notebook with a list
    • Docs › 
    • Basic

    Simple List

    A simple list is unordered and groups a set of related items. Any item may contain a sub-list.

  • An old wooden library database
    • Docs › 
    • Basic

    Ordered List

    Ordered lists group related items and mark them with ascending counters. They provide a very clear structure but are tedious to read when they get too long. Consider to insert a normal paragraph or another block element in between the items of a long list.

  • Code on a screen
    • 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.

  • Straight condensation trail behind an airplane
    • 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.

  • A few chain links
    • Docs › 
    • Basic

    Links

    Internet references or short “links” are the binding fabric of the web. Markdown encourages their use by providing a bunch of simple markup options.

  • Splashing ring of water
    • Docs › 
    • Basic › 
    • Images

    Image Syntax

    The CommonMark image syntax is short and simple and the theme generates a default layout for both kinds of images. To alter their appearance we need Hugo’s resource feature in the front-matter.

  • Some HTML figure tags on a computer screen
    • Docs › 
    • Basic › 
    • Images

    Stand-alone Image (figure)

    The theme allows to resize your stand-alone Markdown images and change their place in the layout.

  • Splashing ring of water
    • Docs › 
    • Basic › 
    • Images

    Embedded image (float)

    Placeholder: Put your own introduction paragraph here instead of this one.

  • Splashing ring of water
    • Docs › 
    • Basic › 
    • Images

    Processing

    The theme relies on Hugo’s processing capabilities for image resources in page bundles.

  • Movable type for printing letters
    • Docs › 
    • Basic

    Special Characters

    All available characters are valid Markdown. The following sections are about the special ones we can’t use directly.

  • A few entries in a printed dictionary
    • Docs › 
    • Extended

    Definition List

    Definition lists consist of terms as list markers, which are associated with details in the list entries.

  • A book with a lot of hand-written notes
    • Docs › 
    • Extended

    Footnotes

    Footnotes are best suited for (formal) information, which is not essential for the meaning of the text.

  • A detail from a large data list
    • Docs › 
    • Extended

    Tables

    Markdown tables need some care, because their layout breaks, when the content of one row exceeds the available width.

  • A few colored pencils
    • 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.

  • Hand written task list
    • 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.

  • Some specimen of movable type for printing
    • Docs › 
    • Extended

    Typographer

    Simple ASCII punctuation characters are substituted with the typographic correct ones.

  • Big diagram on the walls of a room
    • Docs › 
    • Extended

    GoAT

    GoAT renders ASCII diagrams as SVG and is a Golang implementation of Markdeep’s ASCII renderer.

  • Christmas decoration
    • Docs › 
    • Attributes

    How to use Attributes?

    Hugo’s attributes are plain HTML attributes getting injected from the Markdown source into the rendered HTML.

  • The anchor of a ship
    • Docs › 
    • 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.

  • Four columns made of stone
    • Docs › 
    • Attributes

    Columned Text Blocks

    Blocks with many short items can be more clearly arranged in columns.

  • Christmas decoration
    • Docs › 
    • Attributes

    Attribute Register

    All element specific attributes should be listed here.

  • A HTML tag
    • Docs › 
    • Replacements

    How to use replacements

    We enclose a piece of text by curly braces { and } and add an ASCII sign after the first one. x{‍^3} for example gets turned into x3.

  • A HTML tag
    • Docs › 
    • Replacements

    Super- and Subscripts

    When you need only a few super- or subscripts in your Markdown, the replacement codes are there for you.

  • An old typewriter with cactuses growing inside
    • Docs › 
    • Replacements

    Keyboard Legend

    Refer explicitly to keyboard strokes in your text.

  • A sign on a tree cites Martin Luther King in French: “Croyez en vos rêves et ils se réaliseront peut-être. Croyez en vous et ils se réaliseron sûrement.”
    • Docs › 
    • Replacements

    Reference work of other people

    The <cite> tag has changed its purpose over time. It has been used to mark the name of authors, but today it should mark the name of creative works like books, articles or other websites.

    • Docs › 
    • Shortcodes

    How to use shortcodes?

    Hugo’s shortcodes can inject arbitrary and configurable HTML from within Markdown files. They are “Markdown’s hidden superpower”.

  • Old reprint of a classic proof by Diophantus followed by Fermat’s famous last conjecture
    • Docs › 
    • Shortcodes

    Marginal Note

    A marginal note contains additional nonessential information. It explains some context, sheds light on a detail or speculates on a given topic etc.

  • Some HTML figure tags on a computer screen
    • Docs › 
    • Shortcodes

    Figure

    Because no Markdown element corresponds to the complex HTML <figure> tag, we need this shortcode for self-contained stand-alone images.

    • Docs › 
    • Plugins

    LaTeX

    LaTeX is the most popular typesetting system for the natural sciences, its syntax has been established as a quasi-standard to format complex mathematical formulas for print and web layout.

  • A woman with a big mono-fin swimming in a pool
    • Docs › 
    • Plugins

    Mermaid

    You can place your own lead paragraph here before the attribute .p-first and the more tag. If you don’t want to use special styling, just remove the attribute.

  • Lexicon entry
    • Blog

    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.

  • Person configuring his car on a touchscreen
    • Docs › 
    • Appendix › 
    • Config

    markup.yaml

    Markdown configuration file in config/_default

  • Computer keyboard
    • Docs › 
    • Appendix

    Example Punctuation Keymap

    Punctuation Keymap of the German Keyboard Layout for Ubuntu.

  • Code on a screen
    • Blog

    Code Layout

    The main text column offers space for 80 characters of code in one line. When we need 120 to fit in, we can expand code boxes into the marginal column(s).


All Taxonomies

    • style
    • Block(17) •
    • Configuration(9) •
    • Inline(9) •
    • Image(8) •
    • Replacement(6) •
    • List(5) •
    • Shortcode(5) •
    • Attribute(4) •
    • Hugo(3) •
    • Punctuation(3) •
    • Code(2) •
    • Columns(2) •
    • Diagram(2) •
    • Fluid Responsive(2) •
    • Linebreak(2) •
    • Marginal Note(2) •
    • Navigation(2) •
    • Paragraph(2) •
    • Quote(2) •
    • Security(2) •
    • Accessible(1) •
    • Favicon(1) •
    • Figure(1) •
    • Headings(1) •
    • Latex(1) •
    • License(1) •
    • Menu(1) •
    • Module(1) •
    • Page(1) •
    • Parameter(1) •
    • Privacy(1) •
    • Related(1) •
    • Social(1) •
    • Spacing(1) •
    • Table(1) •
    • Taxonomies(1) •
    • Title(1) •
    • Tracking(1) 
    • category
    • Markdown(41) •
    • Theme(8) •
    • Getting started(7) •
    • Hugo(7) •
    • Design(3) •
    • Page(2) •
    • Module(1) •
    • Resources(1) •
    • Shortcode(1) 
    • animation
    • Images(5) •
    • Demo(3) 

Theme

Perplex logo

Apache 2.0 license

Content

Creative Commons 4.0 logo

unless noted otherwise.

Generated with

Hugo logo

Apache 2.0 license

Deployed with

Netlify logo

and

GitHub logo

Tested with

HTML-Proofer, Sonarcloud, Wave and

Browserstack logo

Contact

Impressum (German)