Typora 编辑器实用技巧分享：Markdown 语法入门与 VuePress 主题搭建指南

📝 Typora 编辑器实用技巧分享：Markdown 语法入门与 VuePress 主题搭建指南

🚀 为什么选 Typora 写 Markdown？

新手刚开始接触 Markdown 时，总会被各种编辑器搞得眼花缭乱。 Typora 最大的好处就是 所见即所得，不用像传统 Markdown 编辑器那样来回切换预览模式。打开 Typora，第一眼看到的界面特别干净，左边是编辑区，右边自动实时显示排版效果，写文章的时候完全不会被复杂的工具栏干扰。而且它支持 Windows、macOS 和 Linux 系统，不管用什么电脑都能轻松上手。

✍️ Markdown 基础语法：5 分钟快速入门

1. 标题：让内容层次分明

写文章最重要的是结构清晰，Markdown 里用 # 表示标题，一个 # 是一级标题，两个 # 是二级标题，最多到六级标题。比如写一篇教程，一级标题就可以是 “Markdown 语法入门”，二级标题可以是 “标题用法”“列表写法” 这些。操作也很简单，输入 # 然后敲空格，后面跟上标题内容就行。试试在 Typora 里输入 # 一级标题，马上就能看到超大号的标题效果，二级标题会比一级标题小一点，这样层次一下子就出来了。

2. 列表：整理思路好帮手

平时列要点、写步骤的时候，列表就派上大用场了。Markdown 有两种列表，有序列表和无序列表。有序列表用数字加点，比如 1. 第一步 2. 第二步， Typora 里输入第一个数字加点，按回车会自动生成下一个序号，特别方便。无序列表用 - 或者 *，比如 - 苹果 - 香蕉，输入 - 空格，后面写内容，换行自动生成同样的列表符号。如果想做嵌套列表，比如在一个列表项下面再分几个小点，只需要在子项前面按 Tab 键缩进，马上就能变成子列表，整理复杂的思路特别清晰。

3. 表格：数据展示更直观

遇到需要对比数据、整理表格的时候，Markdown 的表格语法也不难。比如要做一个水果价格表，先输入 | 水果 | 价格 |，然后换行输入 | --- | --- |，再换行输入 | 苹果 | 5元/斤 |， Typora 会自动帮你生成表格。而且双击表格单元格可以直接编辑内容，选中表格还能调整列宽，特别方便。如果记不住语法， Typora 里还有快捷键，按 Ctrl + T 会弹出创建表格的窗口，直接输入行数和列数就行，完全不用手动写代码。

4. 代码块：程序员必备技能

写技术文章的时候经常要展示代码，Markdown 用代码块来处理。如果是单行代码，用反引号包裹，比如 `print("Hello World")`，显示出来就是等宽字体的代码样式。如果是多行代码，用三个反引号开头和结尾，还可以指定编程语言，比如：

python

def hello():
    print("Hello World")
hello()

这样 Typora 会根据指定的语言进行语法高亮，看起来特别清楚。输入的时候，先敲三个反引号，然后输入编程语言名称，按回车，直接写代码就行，新手也能轻松学会。

5. 链接和图片：让内容更丰富

文章里引用链接或者插入图片时，Markdown 语法是 [链接文字](链接地址) 和 ![图片描述](图片地址)。比如想放一张 Typora 的官网图片，就写 ![Typora 官网](https://www.typora.io/images/typora-logo.png)， Typora 里会直接显示图片预览。链接的话，比如提到 VuePress 官网，就写 [VuePress 官网](https://vuepress.vuejs.org/)，点击就能跳转。注意图片地址可以是本地文件路径，也可以是网络地址，如果是本地图片，要确保路径正确，不然就显示不出来啦。

🛠️ Markdown 进阶技巧：提升写作效率

1. 格式设置：让文字更生动

除了标题和列表，Markdown 还能给文字加格式。比如 加粗文字 用两个 * 包裹，像 **重要内容** 就会变成加粗效果；斜体文字 用一个 * 包裹，*强调内容* 就是斜体。如果想同时加粗和斜体，就用三个 *，***加粗斜体*** 就行了。还有删除线，用两个波浪线，比如 ~~过时内容~~ 会显示中间划横线的效果。在 Typora 里，选中文字后，按 Ctrl + B 是加粗，Ctrl + I 是斜体，方便得很，不用记那么多符号。

2. 数学公式：理科生的福音

写学术文章或者数学相关内容时，Markdown 支持插入数学公式。行内公式用单个 $ 包裹，比如 $E=mc^2$ 会显示在文字中间；块级公式用两个 $ 包裹，单独占一行，比如：

输入的时候，先敲 $$ 按回车，然后写公式内容， Typora 会自动渲染成漂亮的数学公式。如果对 LaTeX 语法不熟悉，网上有很多常用公式的写法，直接复制过来改改就行，再也不用为排版公式发愁了。

3. 流程图和思维导图：可视化表达

有时候用文字说不清逻辑关系，Markdown 可以插入流程图和思维导图。流程图用 graph 开头，比如：

graph

graph TD
A[开始] --> B{是否正确}
B -->|正确| C[结束]
B -->|错误| D[重新检查]

Typora 会直接显示流程图，箭头和节点一目了然。思维导图用 mindmap 开头，比如：

图片

代码

豆包

你的 AI 助手，助力每日工作学习

这样就能画出简单的思维导图，整理思路特别好用。如果觉得手动写代码麻烦，网上有很多在线工具可以生成 Markdown 格式的流程图和思维导图，直接复制到 Typora 里就行。

4. 任务列表：管理待办事项

写计划或者任务清单时，任务列表很实用。语法是 - [ ] 任务1 - [x] 任务2，[ ] 表示未完成，[x] 表示已完成。在 Typora 里，点击任务列表前面的方框就能勾选或取消勾选，像一个简单的待办事项管理器。比如写一篇文章的大纲，每个章节用任务列表表示，写完一个就勾选一个，特别有成就感，还能随时查看进度。

5. 引用和脚注：增强文章可信度

引用别人的话或者添加注释时，Markdown 用 > 表示引用，比如：

这句话是引用的内容，通常用来引用名人名言或者权威观点。

脚注用 [^脚注编号] 标记，然后在文章末尾用 [^脚注编号]: 脚注内容 解释，比如文中提到 “VuePress 是 Vue 官方的静态网站生成器 [^1]”，然后在末尾写 [^1]: VuePress 由 Vue 团队开发，专门用于构建技术文档和博客。， Typora 会自动生成脚注链接，点击就能看到详细内容，让文章更严谨。

🌐 VuePress 主题搭建：从入门到精通

1. 准备工作：安装 Node.js 和 VuePress

要使用 VuePress，首先得安装 Node.js，因为 VuePress 是基于 Node.js 开发的。去 Node.js 官网（https://nodejs.org/）下载适合自己系统的安装包，一路下一步安装就行。安装完成后，打开命令行工具（Windows 是命令提示符，macOS 是终端），输入 node -v 和 npm -v，如果显示版本号，说明安装成功。

接下来安装 VuePress，在命令行里输入 npm install -g vuepress，等待安装完成。安装好后，新建一个项目文件夹，比如 my-vuepress-site，进入文件夹，输入 vuepress init，按照提示一步步设置项目名称、作者等信息，初始化完成后，项目结构里会有 docs 文件夹，里面的 README.md 就是首页内容，直接用 Typora 打开编辑就行。

2. 基础配置：修改配置文件

VuePress 的配置文件是 docs/.vuepress/config.js，如果没有的话就新建一个。打开配置文件，基本配置包括 title（网站标题）、description（网站描述）、base（部署路径，一般默认 / 就行）。比如：

javascript

module.exports = {
  title: "我的 VuePress 网站",
  description: "这是一个用 VuePress 搭建的技术博客",
  theme: "vuepress-theme-reco", // 后面会讲主题安装
  themeConfig: {
    nav: [
      { text: "首页", link: "/" },
      { text: "教程", link: "/tutorial/" },
      { text: "关于", link: "/about/" }
    ],
    sidebar: {
      "/tutorial/": [
        { title: "Markdown 入门", link: "/tutorial/markdown/" },
        { title: "VuePress 主题", link: "/tutorial/theme/" }
      ]
    }
  }
}

这里的 nav 是导航栏菜单，sidebar 是侧边栏目录，根据自己的需求修改。保存配置后，在命令行里输入 vuepress dev docs，启动本地服务器，浏览器打开 http://localhost:8080 就能看到效果，修改内容会实时更新，特别方便。

3. 选择主题：让网站更美观

VuePress 官方主题比较简洁，如果想让网站更漂亮，可以安装第三方主题。比如 vuepress-theme-reco 是一个很受欢迎的主题，安装方法是在命令行里进入项目文件夹，输入 npm install vuepress-theme-reco --save。然后在配置文件里设置 theme: "vuepress-theme-reco"，接着配置主题特有的参数，比如首页模块、公告栏、社交链接等。

每个主题都有自己的文档，去主题官网查看详细的配置说明，按照步骤设置就行。比如 reco 主题支持首页轮播图、项目展示模块、评论系统（比如 Valine）等，根据自己的需求添加功能。安装好主题后，再启动服务器，就能看到全新的界面啦，比默认主题好看很多，而且功能更丰富。

4. 自定义主题：打造独特风格

如果觉得第三方主题还不够个性化，还可以自己自定义主题。首先在 docs/.vuepress 文件夹里新建 theme 文件夹，里面创建 Layout.vue 文件，这是主题的布局文件。然后可以修改样式，在 docs/.vuepress/styles 文件夹里新建 index.styl，用 Stylus 语法编写自定义样式，比如修改导航栏颜色、字体大小、链接颜色等。

比如想把导航栏背景色改成蓝色，就在 index.styl 里写：

stylus

$nav-background-color = #2c3e50

还可以添加自定义组件，在 theme 文件夹里新建组件文件，然后在 Layout.vue 里引入使用。自定义主题需要一定的 Vue 开发基础，如果是新手，建议先从第三方主题开始，熟悉之后再尝试自定义，慢慢打造属于自己的独特风格。

5. 部署上线：让网站被全世界看到

网站开发完成后，需要部署到服务器上。常见的部署平台有 GitHub Pages、Gitee Pages、Vercel 等。以 GitHub Pages 为例，首先在 GitHub 上创建一个仓库，名字和项目名一致，比如 username.github.io。然后在命令行里输入 git init 初始化本地仓库，git add . 添加所有文件，git commit -m "first commit" 提交代码，git remote add origin https://github.com/username/username.github.io.git 关联远程仓库，最后 git push -u origin main 推送代码。

然后在 GitHub 仓库设置里，找到 Pages 选项，选择 main 分支，保存后等待几分钟，访问 https://username.github.io 就能看到自己的网站啦。如果用 Vercel，更简单，注册账号后导入 GitHub 仓库，自动部署，域名都不用自己配置，特别方便。部署完成后，记得检查链接是否都正常，页面显示是否正确，确保网站顺利上线。