{"markdown":[{"meta":{"title":"Markdown showcase","description":"All the supported markdown symbols, as a means to illustrate and visualize markdown rendering and styling","author":"GitHub","author_url":"https://github.com","published":"2023-09-27T14:30","updated":null,"tags":["markdown"]},"path":"/2023/09/markdown-showcase","content":"

The content between the two pointy hands is a Svelte component 👇

Updated: February 2, 2024

👆 end of Svelte component

From https://commonmark.org/help/ 🔗

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Normal paragraph text.

~~Crossed-out text.~~

Italic text

Bold text

Commonmark.org - external link 🔗

Link to another Obsidian doc

$\"Horse$

No good deed goes unpunished - Albert Einstein

Unordered list

Guns
and
Roses

Ordered list

One
Two
Three

Task list

todo
done

Horizontal rule 👇

Table 👇

bla	blab	blaba
one	two	three
four	five	six

Inline code with backticks…

// code block\n\n$a = 1;\n$b = 1;\n\nfunction add($a, $b)\n{\n\treturn $a + $b;\n}

YouTube embed 👇

"},{"meta":{"title":"Markdown styling","description":"How I styled the markdown content","author":null,"author_url":null,"published":"2023-09-25T14:30","updated":null,"tags":["markdown"]},"path":"/2023/09/markdown-styling","content":"

Styling markdown is not easy and since I don’t have unlimited time at my disposal to make my own stylesheet, I found one online that I liked and adapted it.

As a developer, I like GitHub’s markdown styling. This repo https://github.com/sindresorhus/github-markdown-css 🔗 replicates it.

It contains 3 stylesheets:

github-markdown-dark.css
github-markdown-light.css
github-markdown.css

I decided to focus on github-markdown.css. I am not applying it globally, only on the pages that need it.

src/routes/[year]/[month]/[slug]/+page.svelte - the article template
src/routes/uses/+page.md - a static page that starts off as a .md file instead of .svelte (yes, you can do that)

But we are opinionated, and also other things

While the default GitHub styling looks great, I realized it wouldn’t do to simply plug it in and call it a day.

For one thing, supporting light and dark mode the way I implemented it (or rather Swyxkit) wouldn’t work. Part of that is because these stylesheets hardcode text, background, and border colors.

For another, there’s a lot of extra stuff in there that I don’t need.

So I decided to fork github-markdown.css and customize it a bit with theming support via CSS tokens, as well as remove the unneeded selectors. I moved all the color definitions to tokens to the global stylesheet, so that the markdown stylesheet doesn’t make color decisions anymore.

I named this slimmer, custom stylesheet markdown.css.

Custom custom styling

In markdown.css, you’ll see references such as:

.markdown-body h1 {\n  margin: .67em 0;\n  font-weight: var(--font-weight-semibold);\n  padding-bottom: .3em;\n  font-size: 2em;\n  border-bottom: 1px solid var(--border-color);\n}

You’ll find the CSS tokens (is this even the right term? whatever) like --border-color defined in src/css/app.postcss right at the top.

If you wish to further customize my custom stylesheet, the sky is the limit. You can, for example, extract font-family, font-size or anything else.

The included CSS is just a starter example, so go wild!

"}]}

#markdown