โš  Just a humble style playground for the site. nothing to see here unless you dig awesomeness โš 

Download This Pageโ€™s Markdown & CSS

๐Ÿ“ Download Ninja Test Markdown   ๐ŸŽจ Download Custom CSS

The Glyphs!!

Copy and paste those annoying symbols that are tough to remember:

Symbols & Special Characters

  • Em dash: โ€”
  • En dash: โ€“
  • Infinity: โˆž
  • Bullet: โ€ข
  • Check mark: โœ”
  • Cross mark: โœ˜
  • Arrow: โ†’
  • Box drawing (thin): โ”€ โ”‚ โ”Œ โ” โ”” โ”˜
  • Box drawing (heavy): โ”โ”ƒโ”โ”“โ”—โ”›
  • Section (ยง): ยง
  • Copyright: ยฉ
  • Registered: ยฎ
  • Degree: ยฐ
  • Pi: ฯ€
  • Micro: ยต
  • Command prompt: $
  • Backtick: `

Some useful emojis

  • ๐Ÿš€ Rocket :rocket: U+1F680
  • โœ… Check Mark :white_check_mark: U+2705
  • โŒ Cross Mark :x: U+274C
  • โš ๏ธ Warning :warning: U+26A0 FE0F
  • ๐Ÿ“ Memo/Note :memo: U+1F4DD
  • ๐Ÿ“ฆ Package/Box :package: U+1F4E6
  • ๐Ÿ”— Link :link: U+1F517
  • ๐Ÿง‘โ€๐Ÿ’ป Technologist :technologist: U+1F9D1 200D 1F4BB
  • ๐Ÿ”’ Lock :lock: U+1F512
  • ๐Ÿ”‘ Key :key: U+1F511
  • ๐Ÿ” Magnifier :mag: U+1F50D
  • ๐Ÿ’ก Light Bulb :bulb: U+1F4A1
  • ๐Ÿ“… Calendar :calendar: U+1F4C5
  • ๐Ÿ“‹ Clipboard :clipboard: U+1F4CB
  • ๐Ÿง™โ€โ™‚๏ธ Mage/Wizard :mage: U+1F9D9 200D 2642 FE0F
  • ๐Ÿ”ง Wrench :wrench: U+1F527
  • ๐Ÿ’พ Floppy Disk :floppy_disk: U+1F4BE
  • ๐Ÿ”ฅ Fire :fire: U+1F525
  • ๐Ÿ“– Book/Docs :book: U+1F4D6
  • ๐Ÿ“ข Loudspeaker :loudspeaker: U+1F4E2
  • ๐Ÿค– Robot :robot: U+1F916
  • ๐Ÿงฉ Puzzle Piece :jigsaw: U+1F9E9
  • ๐ŸŽฏ Target :dart: U+1F3AF
  • โšก High Voltage :zap: U+26A1
  • ๐Ÿ’ฅ Collision :boom: U+1F4A5
  • ๐Ÿ” Repeat :repeat: U+1F501
  • โณ Hourglass :hourglass_flowing_sand: U+23F3
  • ๐Ÿ› ๏ธ Tools :hammer_and_wrench: U+1F6E0 FE0F
  • ๐Ÿšง Construction :construction: U+1F6A7
  • ๐Ÿฆ„ Unicorn :unicorn: U+1F984
  • ๐ŸŒŸ Glowing Star :star2: U+1F31F

Obligatory Lorem ipsum block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod sem at felis scelerisque, at ultrices purus pellentesque. Praesent sit amet turpis non leo suscipit laoreet. Vivamus interdum sapien ut risus vulputate, non congue justo vestibulum. Nunc volutpat dui ac magna cursus, in pulvinar magna gravida. Nulla facilisi. Phasellus vel dui ut libero facilisis sollicitudin vel ac sapien. Etiam posuere velit nec orci viverra, sit amet ullamcorper elit fermentum.

Mauris interdum, nibh in commodo consequat, lorem elit porta mauris, nec pretium nunc urna ac lorem. Sed nec turpis ac mauris fermentum posuere.

closeup of a masked ninja
It's a ninja!!
Mauris interdum, nibh in commodo consequat, lorem elit porta mauris, nec pretium nunc urna ac lorem. Sed nec turpis ac mauris fermentum posuere. Fusce viverra, tortor sed porta feugiat, justo sapien fermentum sapien, sed facilisis lacus est nec eros. Integer tincidunt enim sed est ultrices, nec sagittis nisl gravida. Pellentesque congue sapien a sapien tempor, non posuere est congue. Ut sed nisl ut lectus ultricies egestas. Vivamus a mi sit amet nibh commodo suscipit a sed ipsum.

Make these headings smaller

This sections is for testing head weights/size tweaks.

subheading

sub-subheading

  • Heading

    • Subheading

      • Sub-Subheading

      • Sub-Subheading

    • Another Subheading

Dangling sections (remove this to see)

test lorem ipsum lorem ipsum dolor sit amet test test test test

Custom span sizes

This is a slightly smaller sentence. (0.85em)

This is the normal base size. (1em)

This is a little larger for subtle emphasis. (1.2em)

This is noticeably larger for a punchy effect. (1.5em)

This is huge. Ninja mode activated. (2em)

Font Sampler

Sans-Serif

Roboto Regular 400:
The quick brown fox jumps over the lazy dog.

Roboto Bold 700:
The quick brown fox jumps over the lazy dog.

Roboto Italic:
The quick brown fox jumps over the lazy dog.

Roboto Bold Italic:
The quick brown fox jumps over the lazy dog.

Karla Regular 400:
The quick brown fox jumps over the lazy dog.

Karla Bold 700:
The quick brown fox jumps over the lazy dog.

Karla Italic:
The quick brown fox jumps over the lazy dog.

Karla Bold Italic:
The quick brown fox jumps over the lazy dog.

Serif Font Sampler

Merriweather Regular:
The quick brown fox jumps over the lazy dog.

Merriweather Bold:
The quick brown fox jumps over the lazy dog.

Merriweather Italic:
The quick brown fox jumps over the lazy dog.

Merriweather Bold Italic:
The quick brown fox jumps over the lazy dog.

Typography Playground

Bright cyan sample text
Yellow highlight (for light mode)
High contrast highlight (for dark mode)

Letter Spacing

S P A C E D   T E X T (0.07em letter-spacing)

Compressed text (-0.03em letter-spacing)

Line Height

Tight lines (line-height: 1.1)
The quick brown fox jumps over the lazy dog.

Relaxed lines (line-height: 1.6)
The quick brown fox jumps over the lazy dog.

Blockquote

โ€œTypography is the craft of endowing human language with a durable visual form.โ€
โ€”Robert Bringhurst

for custom style:

โ€œTypography is the craft of endowing human language with a durable visual form.โ€
โ€”Robert Bringhurst

Monospace / Code This is inline code using the siteโ€™s monospace font.

pre/code block โ€” Roboto Mono or system monospace

Small Caps

Small Caps Text Example

Superscript & Subscript This is E = mc2 and H2O

KaTeX test:

Why is this not working correctly? KaTeX is gorgeous and should work here:

This is Euler’s identity: $e^{i\pi} + 1 = 0$

$$ \int_{-\infty}^\infty e^{-x^2} dx = \sqrt{\pi} $$

Color Tag Shortcode Examples

Testing tag.html shortcode:

  • Python
  • CLI
  • Draft
  • WIP
  • Secret Ninja Mode

With combos:

  • Beta next to Mini

Pills:

  • Python
  • CLI
  • Draft
  • WIP
  • Secret Ninja Mode
  • Small pill
  • ๐Ÿ‘‰
  • ๐Ÿ‘‰
  • ๐Ÿ‘‰

Images

Make an image into a link: Alt text

Shadow ninja

Shadow Ninja

Broken link behavior This is the way

Animated gif Pfffffft

ninja Ninja time!

ninja Ninja time!

Ninja #2 Ninja #3 Tacos!

Shortcodes demo

youtube video-id

Highlight 

echo "NINJA โœ…"

Raw HTML block!

Collapse/Accordion (PaperMod)





  See ninja deployment tips
  
    

  • Always test on staging first.
    • 

  • Monitor logs after every deploy.
    • 

  • Trust, but verify: diff is your friend.
    •

COLLAPSED codeblock example

Show example output 
โ”Œโ”€โ”€[ grumble@shinobi ]:~/codelab/adminjitsu  (main*)
โ””โ”€$ cat ../dotfiles/README.md | wordstats --top 10
word         | count
-------------+------
bash         | 10
dotfiles     | 8
shell        | 8
system       | 6
arsenal      | 6
setup        | 5
youre        | 5
hostspecific | 5
bootstrapsh  | 5
sourcing     | 5

Total words:      685
Unique words:     378
Filtered words:   515
Character count:  4480
Avg word length:  6.54
Longest word:     stringusersyournamedotfilesbinarsenalupdatestring (49)
Shortest word:    a (1)

Show example output 
โ”Œโ”€โ”€[ grumble@shinobi ]:~/codelab/adminjitsu  (main*)
โ””โ”€$ cat ../dotfiles/README.md | wordstats --csv --top 8
word,count
bash,10
dotfiles,8
shell,8
system,6
arsenal,6
setup,5
youre,5
hostspecific,5

Text before image… Ninja Cat …and after.

Highlight bash block 

1sudo systemctl restart hugo
2echo "Site deployed by ninja"

Some boilerplate

[![Alt text](image.png)](https://example.com)

๐Ÿ”— View qrgen on GitHub

I hope you found this little playground interesting. I use it to test out style changes, to copy and paste glyphs and tricky syntax and it see how images and links render in the site. If you have any feedback or ideas, please feel free to reach out.

Email me: feedback@adminjitsu.com

tell me, teach me, help me or do it for me.