reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-16 19:51:07 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

update: code block style

Browse source
This commit is contained in:
radishzzz 2025-03-20 05:31:26 +00:00
parent 1e1519c3c5
commit 9283287442
8 changed files with 49 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/content/posts/Markdown Style Guide-en.md
View file

@ -5,6 +5,7 @@ updated: 2025-03-12
tags: ["Guide"]
draft: true
pin: 1
lang: en
abbrlink: markdown-style-guide
---
@ -118,16 +119,32 @@ we can use 3 backticks ``` in new line and write snippet and close with 3 backti
### Output
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
---
// Your component script here!
import Banner from '../components/Banner.astro';
import ReactPokemonComponent from '../components/ReactPokemonComponent.jsx';
const myFavoritePokemon = [/* ... */];
const { title } = Astro.props;
---
<!-- HTML comments supported! -->
{/* JS comment syntax is also valid! */}
<Banner />
<h1>Hello, world!</h1>
<!-- Use props and other variables from the component script: -->
<p>{title}</p>
<!-- Include other UI framework components with a `client:` directive to hydrate: -->
<ReactPokemonComponent client:visible />
<!-- Mix HTML with JavaScript expressions, similar to JSX: -->
<ul>
{myFavoritePokemon.map((data) => <li>{data.name}</li>)}
</ul>
<!-- Use a template directive to build class names from multiple strings or even objects! -->
<p class:list={["add", "dynamic", {classNames: true}]} />
```
## List Types