Mayboy的酷網站

How to customize code box

Mayboy的酷網站 — Thu, 18 Jul 2024 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit:https://mayboy.net//blog/how-to-customize-code-box/

import Collapse from "../../components/blog/collapse.astro"; import Diff from "../../components/blog/diff.astro"; import Error from "../../components/blog/error.astro"; import Info from "../../components/blog/info.astro"; import Kbd from "../../components/blog/kbd.astro"; import Success from "../../components/blog/success.astro"; import Warning from "../../components/blog/warning.astro"; import TimeLine from "../../components/page/TimeLine.astro"; import LinkCard from "../../components/page/LinkCard.astro";

添加行号

此方法仅在 `Shiki` 中可用， `Prism` 无法通过 CSS 直接生成行号。

在 v2.2.1 更新后默认添加行号。

在 src\styles\global.scss 中添加以下内容：

pre .line {
  counter-increment: line;
  padding-left: 2.5em;
}

pre :not(:last-child).line::before {
  content: counter(line);
  position: absolute;
  left: 0;
  width: 3em;
  text-align: right;
  margin-right: 10px;
  color: #888;
}

改变主题

Frosti 使用 Shiki 来渲染代码框， Shiki 已经提供了足够多的主题，不推荐使用 Prism。

有关于 Shiki 的主题详见：https://shiki.style/themes

在 astro.config.mjs 中修改内容：

markdown: {
  shikiConfig: {
    themes: {
      light: 'github-light',
      dark: 'github-dark',
    },
  },
},

Using mdx in Frosti

Mayboy的酷網站 — Fri, 12 Jul 2024 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit:https://mayboy.net//blog/frosti-mdx/

Preface

This article describes how to use the components provided by Frosti in mdx to realize the functions that can't be realized by normal md.

Main text

Getting started

First you need to create an mdx file, which is as simple as changing the extension to .mdx.

Introducing

The components provided by Frosti are placed in the /blog and /page folders. Write something under the document properties (frontmatter):

import Collapse from "../../components/blog/collapse.astro"; import Diff from
"../../components/blog/diff.astro"; import Error from
"../../components/blog/error.astro"; import Info from
"../../components/blog/info.astro"; import Kbd from
"../../components/blog/kbd.astro"; import Success from
"../../components/blog/success.astro"; import Warning from
"../../components/blog/warning.astro"; import TimeLine from
"../../components/page/TimeLine.astro"; import LinkCard from
"../../components/page/LinkCard.astro";

Example

Collapse

This is the hidden content!

<Collapse title="This is an example text.">
  This is the hidden content!
</Collapse>

Diff

<Diff r="/image/r.png" l="/image/l.png" />

Error

Maybe something went wrong? www.baidu.com

<Error>Maybe something went wrong? </Error>

Warning

Hey! Watch out for potholes!

<Warning>Hey! Watch out for potholes! </Warning>

Message

It's just a message.

<Info>It's just a message. </Info>

Success

Congratulations on your successful deployment!

<Success>Congratulations on your successful deployment! </Success>

Kbd

Ctrl + C to copy the text.

<Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> to copy the text.

TimeLine

<TimeLine
  items={[
    { year: "1984", event: "First Macintosh computer" },
    { year: "1998", event: "iMac" },
    { year: "2001", event: "iPod" },
    { year: "2007", event: "iPhone" },
    { year: "2015", event: "Apple Watch" },
  ]}
/>

LinkCard

<LinkCard
  title="Frosti"
  desc="My blog project!"
  url="https://github.com/EveSunMaple/Frosti"
  img="/favicon.ico"
/>

测试文档

Mayboy的酷網站 — Tue, 02 Jul 2024 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit:https://mayboy.net//blog/using-mdx-copy/

标题

Markdown 支持多级标题，使用 # 符号表示。一个 # 表示一级标题，两个 # 表示二级标题，以此类推。

三级标题

这是一个三级标题。

列表

无序列表

项目一
项目二
项目三

有序列表

第一项
第二项
第三项

格式化文本

你可以使用加粗和斜体来格式化文本。

加粗示例

斜体示例

~~删除线示例~~

链接

这是一个链接

图片

代码

你可以在文档中插入代码片段：

def hello_world():
    print("Hello, world!")

Markdown Style Guide

Mayboy的酷網站 — Mon, 01 Jul 2024 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit:https://mayboy.net//blog/markdown-style-guide/

Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.

Headings

The following HTML <h1>—<h6> elements represent six levels of section headings. <h1> is the highest section level while <h6> is the lowest.

H1

H2

H3

H4

H5

H6

Paragraph

Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.

Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.

Images

Syntax

![Alt text](./full/or/relative/path/of/image)

Output

Blockquotes

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

Blockquote without attribution

Syntax

> Tiam, ad mint andaepu dandae nostion secatur sequo quae.  
> **Note** that you can use _Markdown syntax_ within a blockquote.

Output

Tiam, ad mint andaepu dandae nostion secatur sequo quae.
Note that you can use Markdown syntax within a blockquote.

Blockquote with attribution

Syntax

> Don't communicate by sharing memory, share memory by communicating.<br>
> — <cite>Rob Pike[^1]</cite>

Output

Don't communicate by sharing memory, share memory by communicating.
— Rob Pike[^1]

[^1]: The above quote is excerpted from Rob Pike's talk during Gopherfest, November 18, 2015.

Tables

Syntax

| Italics   | Bold     | Code   |
| --------- | -------- | ------ |
| _italics_ | **bold** | `code` |

Output

Italics	Bold	Code
italics	bold	`code`

Code Blocks

Syntax

we can use 3 backticks ``` in new line and write snippet and close with 3 backticks on new line and to highlight language specific syntac, write one word of language name after first 3 backticks, for eg. html, javascript, css, markdown, typescript, txt, bash

```cpp
#include <bits/stdc++.h>
using namespace std;
const int N = 1e5 + 5;
int n, k, a[N];
long long ans;
vector<int> v[N];
int main()
{
    scanf("%d%d", &n, &k);
    for (int i = 1; i <= n; i++)
    {
        scanf("%d", &a[i]);
        v[i % k].push_back(a[i]);
    }
    for (int i = 0; i < k; i++)
        sort(v[i].rbegin(), v[i].rend());
    for (int i = 0; i < k; i++)
    {
        for (int j = 0; j + 1 < v[i].size(); j += 2)
        {
            ans += v[i][j] + v[i][j + 1];
        }
    }
    printf("%lld\n", ans);
    return 0;
}
```

Output

#include <bits/stdc++.h>
using namespace std;
const int N = 1e5 + 5;
int n, k, a[N];
long long ans;
vector<int> v[N];
int main()
{
    scanf("%d%d", &n, &k);
    for (int i = 1; i <= n; i++)
    {
        scanf("%d", &a[i]);
        v[i % k].push_back(a[i]);
    }
    for (int i = 0; i < k; i++)
        sort(v[i].rbegin(), v[i].rend());
    for (int i = 0; i < k; i++)
    {
        for (int j = 0; j + 1 < v[i].size(); j += 2)
        {
            ans += v[i][j] + v[i][j + 1];
        }
    }
    printf("%lld\n", ans);
    return 0;
}

List Types

Ordered List

Syntax

1. First item
2. Second item
3. Third item

Output

First item
Second item
Third item

Unordered List

Syntax

- List item
- Another item
- And another item

Output

List item
Another item
And another item

Nested list

Syntax

- Fruit
  - Apple
  - Orange
  - Banana
- Dairy
  - Milk
  - Cheese

Output

Fruit
- Apple
- Orange
- Banana
Dairy
- Milk
- Cheese

Other Elements

Syntax

<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.

H<sub>2</sub>O

X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>

Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.

Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.

Output

GIF is a bitmap image format.

H₂O

Xⁿ + Yⁿ = Zⁿ

Press CTRL+ALT+Delete to end the session.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

Using MDX

Mayboy的酷網站 — Sat, 02 Jul 2022 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit:https://mayboy.net//blog/using-mdx/

This theme comes with the @astrojs/mdx integration installed and configured in your astro.config.mjs config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file.

Why MDX?

MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to mix JavaScript and UI Components into your Markdown content for things like interactive charts or alerts.

If you have existing content authored in MDX, this integration will hopefully make migrating to Astro a breeze.

Example

Here is how you import and use a UI component inside of MDX.
When you open this page in the browser, you should see the clickable button below.

Mayboy的酷網站

How to customize code box

添加行号

改变主题

Using mdx in Frosti

Preface

Main text

Getting started

Introducing

Example

Collapse

Diff

Error

Warning

Message

Success

Kbd

TimeLine

LinkCard

测试文档

标题

三级标题

列表

无序列表

有序列表

格式化文本

链接

图片

代码

Markdown Style Guide

Headings

H1

H2

H3

H4

H5

H6

Paragraph

Images

Syntax

Output

Blockquotes

Blockquote without attribution

Syntax

Output

Blockquote with attribution

Syntax

Output

Tables

Syntax

Output

Code Blocks

Syntax

List Types

Ordered List

Syntax

Output

Unordered List

Syntax

Output

Nested list

Syntax

Output

Other Elements

Syntax

Output

Using MDX

Why MDX?

Example

More Links