想给自己的博客添加GitHub风格的Markdown样式

一个好看而一致的排版是引人注目的关键之一。为了实现这一目标，我使用 github-markdown-css，这是一个提供GitHub风格的Markdown样式的工具。

GitHub 仓库地址

首先，这是 github-markdown-css 的 GitHub 仓库地址。通过该链接，你可以查看项目的文档、提出问题，或者了解最新的更新和贡献者信息。

为什么使用 github-markdown-css

为什么选择使用 github-markdown-css 呢？这个工具提供了一系列优势：

• 一致性: 通过使用 GitHub 风格，你可以保持与 GitHub 上的 README 文件和许多开源项目的一致性。
• 美观性: GitHub 风格的 Markdown 样式通常被认为具有清晰的排版和美观的界面，使你的博客文章更易于阅读。
• 易用性: 安装和使用 github-markdown-css 非常简单。

安装与使用

在你的项目目录下运行以下命令安装 github-markdown-css：

pnpm add github-markdown-css

在你的 main.js 文件中导入 github-markdown.css 文件：

import 'github-markdown-css'

在你的 Markdown 内容中，为了应用 GitHub 风格的样式，添加 markdown-body 的 class，并按照需要自定义文章内容。示例代码如下：

<article class="markdown-body">
    <h1>Unicorns</h1>
    <p>All the things</p>
</article>

样式定制也是可能的。以下是默认样式，你可以在你的项目中的样式文件中进行调整：

.markdown-body {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 980px;
    margin: 0 auto;
    padding: 45px;
}

通过这些简单的步骤，你可以在博客文章中使用 GitHub 风格的 Markdown 样式，并通过 pnpm 进行包管理。