A person with short, thick hair and prescription glasses sits at an organized workstation, using a magnification app to navigate a webpage. Their posture is proper and relaxed. On the desk: a computer, a mouse, a large desk lamp and a small notebook.

# Showing Off Blog Features

3 min read
Table of Contents

标题1

标题2

标题三

文字:安抚都怕个hi哈哦哦i熬过和哦i啊化工哈狗i奥i梵高i共给给

Since the post does not have a description in the frontmatter, the first paragraph is used.

Theming

Use your favorite editor theme for your blog!

Theming for the website comes from builtin Shiki themes found in Expressive Code. You can view them here. A website can have one or more themes, defined in src/site.config.ts. There are three theming modes to choose from:

  1. single: Choose a single theme for the website. Simple.
  2. light-dark-auto: Choose two themes for the website to use for light and dark mode. The header will include a button for toggling between light/dark/auto. For example, you could choose github-dark and github-light with a default of "auto" and the user’s experience will match their operating system theme straight away.
  3. select: Choose two or more themes for the website and include a button in the header to change between any of these themes. You could include as many Shiki themes from Expressive Code as you like. Allow users to find their favorite theme!

When the user changes the theme, their preference is stored in localStorage to persist across page navigation.

Code Blocks

Let’s look at some code block styles:

def hello_world():
print("Hello, world!")
hello_world()
hello.py
def hello_world():
print("Hello, world!")
hello_world()
Terminal window
python hello.py

Also some inline code: 1 + 2 = 3. Or maybe even (= (+ 1 2) 3).

See the Expressive Code Docs for more information on available features like wrapping text, line highlighting, diffs, etc.

Basic Markdown Elements

  • List item 1
  • List item 2

Bold text

Italic text

Strikethrough text

Link

In life, as in art, some endings are bittersweet. Especially when it comes to love. Sometimes fate throws two lovers together only to rip them apart. Sometimes the hero finally makes the right choice but the timing is all wrong. And, as they say, timing is everything.

- Gossip Girl

NameAgeCity
Alice30New York
Bob25Los Angeles
Charlie35Chicago

Images

Images can include a title string after the URL to render as a <figure> with a <figcaption>.

Pixel art of a tree
Pixel art renders poorly without proper CSS

Pixel art markdown
![Pixel art of a tree](./PixelatedGreenTreeSide.png 'Pixel art renders poorly without proper CSS')

I’ve also added a special tag for pixel art that adds the correct CSS to render properly. Just add #pixelated to the very end of the alt string.

Pixel art of a tree
But adding #pixelated to the end of the alt string fixes this

Pixel art markdown with #pixelated
![Pixel art of a tree #pixelated](./PixelatedGreenTreeSide.png 'But adding #pixelated to the end of the alt string fixes this')

Admonitions

Admonition example in markdown
:::note
testing123
:::

GitHub Cards

GitHub overview cards heavily inspired by Astro Cactus.

GitHub repo card example in markdown
::github{repo="stelcodes/multiterm-astro"}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
00K00KMIT
GitHub user card example in markdown
::github{user="withastro"}
00K00K

Emoji 🤩

Emojis can be added in markdown by including a literal emoji character or a GitHub shortcode. You can browse an unofficial database here.

Example markdown with GitHub emoji shortcodes
Good morning! :sleeping: :coffee: :pancakes:

Good morning! 😴 🥞

All emojis (both literal and shortcoded) are made more accessible by wrapping them in a span tag like this:

<span role="img" aria-label="coffee">☕️</span>

At the time of writing, emoji v16 is not supported yet. These emojis can be included literally but they do not have shortcodes and will not be wrapped.

LaTeX/KaTeX Math Support

You can also display inline math via remark-math and rehype-katex.

Rendering pretty math with KaTeX
Make those equations pretty! $ \frac{a}{b} \cdot b = a $

Make those equations pretty! abb=a\frac{a}{b} \cdot b = a

HTML Elements

Fieldset with Inputs






Form with Labels







Comments