Design Reference

I use this page to test how markdown and various page features are rendered in my site's active design. I've tried to make use of all the features I rely on and some additional oddities that come from other places where I use the source content of this site (such as my internal notes).

We get our H1 tag for free, though I should be sure that the top level item isn't double rendered and should probably have some kind of lint to make sure there is exactly one top level heading. This does go against the common markdown lint spec but I like my documents to have an independent title from the metadata and not be precisely bound to the name of the file (which to me is more of a slug for the document than a title).

H2

Second level section with some arbitrary text.

H3

Down the rabbit hole we go, into the third level of my mind.

H4

Surely four levels is enough!? How deep are you going to go?

H5

Beyond the pale, into the fifth level of hell.

H6

Here there be dragons, the sixth level of the abyss.

Basic Formatting

• Bold Text two ways
• Italic Text two ways
• some inline code in the middle of sentence
• a strike through example
• some highlighted text (may also be referred to as "marked" text)
• A simple molecule using subscript H₂O
• A little equation using superscript 2¹⁰ though I should use mathjax for that.
• Some inserted text and some --deleted text--

blockquote text with some italic and bold text

Lists

1. First ordered list item

2. Another item

   • Unordered sub-list.

3. And another item.

   1. Ordered sub-list

   indented paragraphs within list items. Note the blank line above, and the leading spaces.

4. One more item

• Unordered list
• with a couple elements

Links

inline-style link

inline link with title

arbitrary link as reference text

relative reference to a repository file

Numbers for reference-style link definitions

use the link text itself

Intermediate text as placeholder after links before references.

And a footnote ¹ for good measure.

Images

Inline-style:

Reference-style:

Code and Syntax Highlighting

Inline code with some extra text

Rust:

1
2
3

fn main {
  println!("rust syntax highlighting");
}

JavaScript:

1
2

var s = "JavaScript syntax highlighting";
alert(s);

Python:

1
2

s = "Python syntax highlighting"
print s

No Declaration:

No language indicated, so no syntax highlighting in Markdown Here.
But let's throw in a <b>tag</b> to see how HTML is treated.

Tables

Blockquotes

Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.

Quote break.

This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

Obsidian aside:

[!Note] I use these in my notes mostly as asides, it would be nice to render these alongside the main content.

Horizontal Rule

As above...

...so below.

Beyond Markdown

Definition Lists

The pure HTML form gets stripped out, but the extended syntax form works. I'll need to update some internal notes to this syntax aand make it work in my other systems.

Term

with a definition following it

Embedded YouTube Videos

YouTube videos can be embedded using the custom youtube shortcode. Pass the video ID as the first positional argument or as id, and optionally set title for accessibility:

Mathjax

$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

Mermaid Diagrams

Basic flowchart:

graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D

Basic pie chart:

pie title What Voldemort doesn't have?
         "FRIENDS" : 2
         "FAMILY" : 3
         "NOSE" : 45

Basic sequence diagram:

sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

Sankey:

sankey-beta

%% source,target,value
Electricity grid,Over generation / exports,104.453
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,H2 conversion,27.14

Mindmap:

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness
and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

Task List

• Complete building a design reference content page
• Clean up all my outstanding notes for publication
• Profit

Search Results

The following demonstrates the appearance of search results as rendered by the client-side search. These are static samples for design validation.

Emoji Reference

A more complete list can be found but these are emojis I'm likely to want to quickly look up:

• sweat_smile: 😅
• rofl: 🤣
• upside_down_face: 🙃
• smiling_face_with_three_hearts: 🥰
• heart_eyes: 😍
• kissing_heart: 😘
• stuck_out_tongue_winking_eye: 😜
• thinking: 🤔
• raised_eyebrow: 🤨
• grimacing: 😬
• exploding_head: 🤯
• open_mouth: 😮
• cry: 😢
• astonished: 😲
• skull_and_crossbones: ☠️
• ghost: 👻
• see_no_evil: 🙈
• hear_no_evil: 🙉
• speak_no_evil: 🙊
• heart: :heart
• 100: 💯
• ok_hand: 👌
• point_up: ☝️
• +1: 👍
• eyes: 👀
• muscle: 💪
• brain: 🧠
• footprints: 👣
• sunflower: 🌻
• cheese: 🧀
• crab: 🦀
• rocket: 🚀
• airplane: ✈️
• sunny: ☀️
• cresent_moon: :cresent_moon:
• rainbow: 🌈
• zap: ⚡
• fire: 🔥
• godmode: :godmode: