Markdown & Styling Test Post

• 03 October 2024
• Meta,
• Web Development

This blog uses the Eleventy Static Site Generator with the eleventy-base-blog template, because I wanted to be able to write all the posts in markdown & have them automatically turned into HTML.

(Though truth be told, the main reason was that this template also generates an RSS feed for all posts on its own; I really didn't want to have to deal with the trouble of doing that myself...)

I'm using this post as a playground to test out a bunch of stuff related to the markdown parser, and make sure all the CSS for this blog works exactly the way I want it to. And to remind myself of the syntax every now and again.

Feel free to pilfer as many of these stylings as you feel like for your own site! I'm actually really happy with how the tables turned out

Here's a horizontal separator:

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5

Headline 6

There's no headlines 7 or onward in markdown.

Basic Stuff

Here's a link I guess

Some italic and bold and italic and bold text here,
and some strikethrough text here,
and some bold AND italic text right over there.

And some _subscript? Some ^superscript?

• one
• two
• three

Emoji font test 👍🎉✨

1. One
2. Two
3. Three

a. one b. two

a) eins b) zwei

• I can
  • Nest this list
  • Just like this
    • Or like that
  • And un-nest it
• just as easy.

1. and here's a
2. numbered list
   • with a normal list
   • nested inside it
3. and back to the numbers
   • and how about
     1. one more layer in here
        • and another one in there
     2. alrighty that'll do

• Does this markdown parser
• Support checklists?

Don't look now but here's a spoiler! And Here's a really really long spoiler that has a linebreak in it, probably. It can be important to be really, truly sure it still looks good when it's styled like this... but maybe I should just be using a dropdown for loooong spoilers like that? Not the short tiny one? It'd make more sense that way, I think. Not much point in taking up this much space elsewise...

Code

And here's a code tag! And Here's a really really long code tag that has a linebreak in it, probably. It can be important to be really, truly sure it still looks good when it's styled like this... but maybe I should just be using proper linebreaks and a multiline code block for loooong bits of code like that? Not the short tiny one? It'd make more sense that way, I think. Not much point in making it this hard to read elsewise...

Here's some inline code ABCgfphl_+? too.
Here's more inline code ABCgfphl_+? too, to check if the vertical spacing is alright.
And here are some keystrokes: Ctrl+Alt+Del.

Heading with a link

Code blocks with the language specified:

// this is a command
function myCommand() {
+  let counter = 0;
-  let counter = 1;
  counter++;
}

// Test with a line break above this line.
console.log('Test');

Language not specified:

// this is a command
function myCommand() {
  let counter = 0;
  counter++;
}

// Test with a line break above this line.
console.log('Test');

Language specified as plaintext:

// this is a command
function myCommand() {
  let counter = 0;
  counter++;
}

// Test with a line break above this line.
console.log('Test');

And a basic named/labelled code block:

console.log("Hello World!")
named-code-block.js

Tables

(Apparently HTML tables even have a caption tag? And there's a caption-side CSS property? What's with that? Oh, and a colgroup and col tag for styling, that's neato)

This is where I start getting distracted

Reviews are in:

It's a website!

Thank you very much.

Definitely a website. I like how it can

nest blockquotes,

like this,

that's pretty neat in my book.

Love to hear it.

+ Help
- I am stuck in a code block factory

I appreciate your feedback.

I don't have link previews for stuff.
https://www.youtube.com/watch?v=dQw4w9WgXcQ
But if I did, I'd expect to be able to disable them like this:
https://www.youtube.com/watch?v=dQw4w9WgXcQ
Ooh the markdown parser uses that as an alternate shorthand for hyperlinks huh

How about a custom anchor point? I can jump back to it with this link.

Here's a picture: Please enjoy.

Lastly, I'd like to check something^[1] neat ^[2].

At this point I'm just tossing in every plugin for the markdown parser I think looks neat. There's even one for GitHub-style notes and warnings:

Surely I can *escape* *stuff* too.

And mark things, and use 'breves.

Dropdowns

Note to self: make the little arrows for these an open/closed eye

• Closed by default

  Click me!

  Hidden by default

• Open by default

  Click me!

  Shown by default

• Closed by default, nested

  Click me!

  Hidden by default

  Nested

  Shown by default

• Open by default, nested

  Click me!

  Shown by default

  Nested

  Inner hidden text

Woah I never knew HTML had tags like this:

You can do cool annotationsJapanese pronounciation guides with these...

There's a semantic tag for sample output from a computer program, specifically.
Not to be confused with the semantic tag for computer code.
Or the semantic tag for Ctrl+C Keyboard inputs.

Cool Meter - Alt text goes here.

Cooler Meter - And here,

Percentile Meter - And here.

Wait there's a separate tag for progress bars: 32%

Note to self: look into image maps, esp. regarding keyboard/tab navigation and screen readers.
EDIT: ok ok they DO have tab navigation, do NOT have arrow key navigation, and you can/should put alt text in for screen readers.

Tag for small.
There's one for big, too. But it's deprecated.

Audio player with controls (and mouseover alt text for accessibility):

The var tag lets you do letters all like N * a + b = x
Wait those are literally just rendered as italics... I guess it's more a semantic tag than anything else...

There's even a track tag for video subtitles... with attributes for language selection and everything.

Formatting dates like This.

And that's it, I think!

• ← Previous
  FFXIV - Making The 2023 Halloween Poster Real
• Next →
  Inaugural Post