1315 words

7 minutes

Fuwari Static Web Markdown Navigation

2020-08-28

moments

This blog template is built with Astro. For the things that are not mentioned in this guide, you may find the answers in the Astro Docs.

Front-matter of Posts#

1
---
2
title: My First Blog Post
3
published: 2020-08-28
4
description: This is the first post of my new Astro blog.
5
image: ./cover.jpg
6
tags: [Foo, Bar]
7
category: Front-end
8
draft: false
9
---

Attribute	Description
`title`	The title of the post.
`published`	The date the post was published.
`updated`	The date the post was last updated.
`description`	A short description of the post. Displayed on index page.
`image`	The cover image path of the post. 1. Start with `http://` or `https://`: Use web image 2. Start with `/`: For image in `public` dir 3. With none of the prefixes: Relative to the markdown file
`tags`	The tags of the post.
`category`	The category of the post.
`draft`	If this post is still a draft, which won’t be displayed.

Where to Place the Post Files#

Your post files should be placed in src/content/posts/ directory. You can also create sub-directories to better organize your posts and assets.

1
src/content/posts/
2
├── post-1.md
3
└── post-2/
4
    ├── cover.png
5
    └── index.md

Basic Markdown Syntax#

Headers#

H1 Header#

H2 Header#

H3 Header#

H4 Header#

H5 Header#

H6 Header#

Text Formatting#

Italic text
Bold text
Bold and italic text
~~Strikethrough~~
Inline code
Link to example
![Image alt text](/path/to/image.jpg) (Example image path)

Lists#

Unordered list:

Item 1
Item 2
- Subitem 1
- Subitem 2

Ordered list:

First item
Second item
1. Subitem 1
2. Subitem 2

Blockquotes#

This is a blockquote.

It can span multiple lines.

Code Blocks#

1
// This is a code block with syntax highlighting
2
#[instrument(skip_all, name = "trace_start_server")]
3
fn main() -> Result<(), ServerError> {
4
    let rt = match compio::runtime::Runtime::new() {
5
        Ok(rt) => rt,
6
        Err(e) => {
7
            match e.kind() {
8
                std::io::ErrorKind::OutOfMemory => print_locked_memory_limit_info(),
9
                std::io::ErrorKind::PermissionDenied => print_io_uring_permission_info(),
10
                _ => {}
11
            }
12
            panic!("Cannot create runtime: {e}");
13
        }
14
    };
15
}

1
// Code block without syntax highlighting
2
console.log("Hello, world!");

Tables#

Column 1	Column 2	Column 3
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

Horizontal Rule#

Footnotes#

This is a footnote reference¹.

Extended Markdown Features#

GitHub Repository Cards#

You can add dynamic cards that link to GitHub repositories. On page load, the repository information is pulled from the GitHub API.

saicaca

/

fuwari

Waiting for api.github.com...

00K

0K

Waiting...

Create a GitHub repository card with the code ::github{repo="<owner>/<repository>"}.

Admonitions#

Following types of admonitions are supported: note tip important warning caution

NOTE
Highlights information that users should take into account, even when skimming.

TIP
Optional information to help a user be more successful.

IMPORTANT
Crucial information necessary for users to succeed.

WARNING
Critical content demanding immediate user attention due to potential risks.

CAUTION
Negative potential consequences of an action.

Custom Titles#

The title of the admonition can be customized.

MY CUSTOM TITLE
This is a note with a custom title.

Basic syntax:

1
:::note
2
Highlights information that users should take into account, even when skimming.
3
:::
4

5
:::tip[Custom Title]
6
This is a tip with a custom title.
7
:::

GitHub Syntax#

NOTE
The GitHub syntax is also supported.

1
> [!NOTE]
2
> The GitHub syntax is also supported.
3

4
> [!TIP]
5
> The GitHub syntax is also supported.

Spoilers#

You can add spoilers to your text. The text also supports Markdown syntax.

The content is hidden ayyy!

1
The content :spoiler[is hidden **ayyy**]!

Embedding Media#

Videos#

You can embed videos from various platforms like YouTube or Bilibili by copying and pasting the embed code:

YouTube#

Draft Posts#

You can mark posts as drafts by setting draft: true in the frontmatter. Draft posts will not be visible to visitors but can be previewed during development.

When the article is ready for publication, update the “draft” field to “false” in the Frontmatter:

1
---
2
title: Draft Example
3
published: 2024-01-11T04:40:26.381Z
4
tags: [Markdown, Blogging, Demo]
5
category: Examples
6
draft: false
7
---

Here, we’ll explore how code blocks look using Expressive Code. The provided examples are based on the official documentation, which you can refer to for further details.

Expressive Code#

Syntax Highlighting#

Syntax Highlighting

Regular syntax highlighting#

1
console.log('This code is syntax highlighted!')

Rendering ANSI escape sequences#

1
ANSI colors:
2
- Regular: Red Green Yellow Blue Magenta Cyan
3
- Bold:    Red Green Yellow Blue Magenta Cyan
4
- Dimmed:  Red Green Yellow Blue Magenta Cyan
5

6
256 colors (showing colors 160-177):
7
160 161 162 163 164 165
8
166 167 168 169 170 171
9
172 173 174 175 176 177
10

11
Full RGB colors:
12
ForestGreen - RGB(34, 139, 34)
13

14
Text formatting: Bold Dimmed Italic Underline

Editor & Terminal Frames#

Editor & Terminal Frames

Code editor frames#

1
console.log('Title attribute example')

1
<div>File name comment example</div>

Terminal frames#

1
echo "This terminal frame has no title"

1
Write-Output "This one has a title!"

Overriding frame types#

1
echo "Look ma, no frame!"

1
# Without overriding, this would be a terminal frame
2
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
3
New-Alias tail Watch-Tail

Text & Line Markers#

Text & Line Markers

Marking full lines & line ranges#

1
// Line 1 - targeted by line number
2
// Line 2
3
// Line 3
4
// Line 4 - targeted by line number
5
// Line 5
6
// Line 6
7
// Line 7 - targeted by range "7-8"
8
// Line 8 - targeted by range "7-8"

Selecting line marker types (mark, ins, del)#

1
function demo() {
2
  console.log('this line is marked as deleted')
3
  // This line and the next one are marked as inserted
4
  console.log('this is the second inserted line')
5

6
  return 'this line uses the neutral default marker type'
7
}

Adding labels to line markers#

1
<button
2
  role="button"
3
  {...props}
4
  value={value}
5
  className={buttonClassName}
6
  disabled={disabled}
7
  active={active}
8
>
9
  {children &&
10
    !active &&
11
    (typeof children === 'string' ? <span>{children}</span> : children)}
12
</button>

Adding long labels on their own lines#

1
<button
2
  role="button"
3
  {...props}
4

5
  value={value}
6
  className={buttonClassName}
7

8
  disabled={disabled}
9
  active={active}
10
>
11

12
  {children &&
13
    !active &&
14
    (typeof children === 'string' ? <span>{children}</span> : children)}
15
</button>

Using diff-like syntax#

1
this line will be marked as inserted
2
this line will be marked as deleted
3
this is a regular line

1
--- a/README.md
2
+++ b/README.md
3
@@ -1,3 +1,4 @@
4
+this is an actual diff file
5
-all contents will remain unmodified
6
 no whitespace will be removed either

Combining syntax highlighting with diff-like syntax#

1
function thisIsJavaScript() {
2
  // This entire block gets highlighted as JavaScript,
3
  // and we can still add diff markers to it!
4
  console.log('Old code to be removed')
5
  console.log('New and shiny code!')
6
}

Marking individual text inside lines#

1
function demo() {
2
  // Mark any given text inside lines
3
  return 'Multiple matches of the given text are supported';
4
}

Regular expressions#

1
console.log('The words yes and yep will be marked.')

Escaping forward slashes#

1
echo "Test" > /home/test.txt

Selecting inline marker types (mark, ins, del)#

1
function demo() {
2
  console.log('These are inserted and deleted marker types');
3
  // The return statement uses the default marker type
4
  return true;
5
}

Word Wrap#

Word Wrap

Configuring word wrap per block#

1
// Example with wrap
2
function getLongString() {
3
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
4
}

1
// Example with wrap=false
2
function getLongString() {
3
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
4
}

Configuring indentation of wrapped lines#

1
// Example with preserveIndent (enabled by default)
2
function getLongString() {
3
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
4
}

1
// Example with preserveIndent=false
2
function getLongString() {
3
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
4
}

Collapsible Sections#

Collapsible Sections


5 collapsed lines
1
// All this boilerplate setup code will be collapsed
2
import { someBoilerplateEngine } from '@example/some-boilerplate'
3
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
4

5
const engine = someBoilerplateEngine(evenMoreBoilerplate())
6

7
// This part of the code will be visible by default
8
engine.doSomething(1, 2, 3, calcFn)
9

10
function calcFn() {
11
  // You can have multiple collapsed sections
3 collapsed lines
12
  const a = 1
13
  const b = 2
14
  const c = a + b
15

16
  // This will remain visible
17
  console.log(`Calculation result: ${a} + ${b} = ${c}`)
18
  return c
19
}
20

4 collapsed lines
21
// All this code until the end of the block will be collapsed again
22
engine.closeConnection()
23
engine.freeMemory()
24
engine.shutdown({ reason: 'End of example boilerplate code' })

Line Numbers#

Line Numbers

Displaying line numbers per block#

1
// This code block will show line numbers
2
console.log('Greetings from line 2!')
3
console.log('I am on line 3')

// Line numbers are disabled for this block
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')

Changing the starting line number#

5
console.log('Greetings from line 5!')
6
console.log('I am on line 6')

Inline math equations go in like so: $\omega = d\phi / dt$ . Display math should get its own line and be put in in double-dollarsigns:

$I = \int \rho R^{2} dV$

\begin{equation*} \pi =3.1415926535 \;8979323846\;2643383279\;5028841971\;6939937510\;5820974944 \;5923078164\;0628620899\;8628034825\;3421170679\;\ldots \end{equation*}

And note that you can backslash-escape any punctuation characters which you wish to be displayed literally, ex.: `foo`, *bar*, etc.

This is the footnote content. ↩

Fuwari Static Web Markdown Navigation

https://svecco.org/posts/fuwari-template/

Author

Svecco

Published at

2020-08-28

License

CC BY-NC-SA 4.0

Front-matter of Posts

Where to Place the Post Files

Basic Markdown Syntax

1

H1 Header

H2 Header

Extended Markdown Features