Perplex Theme
  • News
  • Docs
  • Blog
  • About
  • GitHub

Tag: Block

Markdown block elements

  • Markdown logo
    • Docs
    • ›
    • TL;DR

    Markdown Layout

    Samples of Hugo’s extended CommonMark syntax to give a quick impression of the layout capabilities.

    • Georg Makowski
  • Newspaper page with lots of different headings
    • 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.

    • Georg Makowski
  • Some paragraphs of text
    • Docs
    • ›
    • Basic

    Paragraphs

    Paragraphs are the essential building blocks of text. A comfortable line length and surrounding whitespace contribute to their legibility.

    • Georg Makowski
  • 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.

    • Georg Makowski
  • 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.

    • Georg Makowski
  • 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 for a relatively short number of items.

    • Georg Makowski
  • 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.

    • Georg Makowski
  • 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.

    • Georg Makowski
  • 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.

    • Georg Makowski
  • 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.

    • Georg Makowski
  • 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.

    • Georg Makowski
  • 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.

    • Georg Makowski
  • bridge structure
    • Docs
    • ›
    • Improved
    • ›
    • Image

    Extended Image Syntax

    To alter the appearance we can pass additional parameters.

    • Georg Makowski
  • A splashing drop of water
    • 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.
    • Georg Makowski
  • Complicated image
    • Docs
    • ›
    • Improved
    • ›
    • Image

    Image Processing

    The theme relies solely on Hugo’s image-processing capabilities.

    • Georg Makowski
  • A splashing drop of water
    • Blog
    • •
    • Markdown
    Mar 27, 2023

    Stand-alone Image Layout

    This page demonstrates the layout for advanced stand-alone images.

    • Georg Makowski
  • Splashing ring of water
    • Blog
    • •
    • Markdown
    Mar 23, 2023

    Embedded image (float)

    This page demonstrates the layout for advanced embedded images.

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

    • Georg Makowski

All Taxonomies

    • Markdown(51)‍•
    • Getting started(7)‍•
    • Hugo(7)‍•
    • Design(5)‍•
    • External(5)‍•
    • Module(4)‍•
    • Overview(4)‍•
    • Theme(4)‍•
    • Page(2)‍•
    • Release(2)‍•
    • Resources(1)‍•
    • Tip(1)
    • Block(18)‍•
    • Image(12)‍•
    • Inline(10)‍•
    • Configuration(9)‍•
    • Replacement(8)‍•
    • Attribute(7)‍•
    • Fluid Responsive(5)‍•
    • List(5)‍•
    • Diagram(4)‍•
    • Hugo(4)‍•
    • Feature(3)‍•
    • Punctuation(3)‍•
    • Shortcode(3)‍•
    • Code(2)‍•
    • Latex(2)‍•
    • Linebreak(2)‍•
    • Marginal Note(2)‍•
    • Mermaid(2)‍•
    • Paragraph(2)‍•
    • Quote(2)‍•
    • Search(2)‍•
    • Security(2)‍•
    • Accessible(1)‍•
    • Author(1)‍•
    • Color(1)‍•
    • Embedded(1)‍•
    • Favicon(1)‍•
    • File(1)‍•
    • Headings(1)‍•
    • License(1)‍•
    • Menu(1)‍•
    • Module(1)‍•
    • Parameter(1)‍•
    • Privacy(1)‍•
    • Related(1)‍•
    • Spacing(1)‍•
    • Table(1)‍•
    • Title(1)‍•
    • Tracking(1)‍•
    • VSCode(1)
    • Images(6)‍•
    • Demo(4)

Theme

Perplex logo

Apache 2.0 license

Credits

Thanks to you all!

Content

unless noted otherwise.

Generated with

Hugo logo

Apache 2.0 license

Deployed with

Netlify logo

and

Tested with

HTML-Proofer, Sonarcloud, Wave and

Browserstack logo

Legal matters

  • Licenses
  • Impressum (German)