Mario's blog

一 、概述

1、简介

typora是一款轻量级但功能强大的markdown编辑器，支持实时预览、多种格式导出、自定义主题等功能。可以用来记笔记，写技术类的文档。不仅仅适用于程序员，同时也是一款好用的码字、写材料的工具。

1

ps：写小说也可以用哦

2、下载及安装

搜索typora中文官网：Typora 官方中文站可根据自身系统进行下载。有米的请支持正版，也可参照以下两个网站步骤进行安装（方法引至CSDN，感谢各位）。

• 激活方法（目前版本1.9.5以前可用）：Typora 免费安装教程（已支持最新版 1.9.5）_typora免费安装-CSDN博客
• 不激活通过修改配置文件方法（各版本均可用）：typora 序列号（不使用也可以激活）_typora离线激活-CSDN博客

1

ps:不缺这三瓜两枣的尽量购买

二 、使用手册

1、基本设置

以下是typora中常见的设置，其余可以保持默认

1
2
3

#1 点开文件-->偏好设置-->文件选项-->保存&恢复中勾选“自动保存”
#2 点开文件-->偏好设置-->markdown选项-->markdown语法偏好-->勾选“严格模式”
#3 点开文件-->偏好设置-->markdown选项-->markdown扩展语法-->全部勾选

2、文档编辑相关

2.1 标题

标题会在目录于大纲分级显示，可以跳转。在typora中开启严格模式，即不应为#标题，应为# 标题，设置方法如下：数个“#”+空格 前置

1
2
3
4
5
6

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

2.2 强调

用“**”或“—”包围，或者选中要强调的文字按下ctrl+B.

1
2

#1  **我喜欢学习typora**
#2  __我喜欢学习typora__

示例：

我喜欢学习typora

2.3 斜体

用“*”或“—”包围，或者选中文字按下ctrl+I.

1
2

#1 *我喜欢学习typora*
#2 _我喜欢学习typora_

示例：

我喜欢学习typora

如果需要斜体并强调，【则加三个“*”或者三个“—”.】

2.4 删除线

用“~~”包围，或者shift+alt+5

1

~~学习治好了我的焦虑~~

示例：

学习治好了我的焦虑

学习使我快乐

2.5 高亮

用“==”包围

1

==每月坚持学习一项新东西==

示例：

==每月坚持学习一项新东西==

2.6 代码

用“`”包围

1

`print("hello, world!")`

示例：

print("hello, world!")

2.7 代码块

按三个“`”并敲回车，要想显示行数，需要在typora的设置里进行勾选，另外代码块里可以选择语言，其会根据语言（如python）来自动高亮各个语句。

1

python

2.8 引用

用“>” 前置，需要嵌套使用，则多加一个“>”

1
2
3

>引用就是在前面加竖线
>>这个就是在嵌套
>>>三重嵌套，过瘾把

示例：

引用就是在前面加竖线

这个就是在嵌套

三重嵌套，过瘾把

2.9 无序列表

用“-”或“+”+空格 前置，回车后按下‘tab“键后，会自动缩进一级。按下”ctrl+[“,取消缩进，回到行首。

1
2
3

- 相当于在文字前加实心点
+ 一样的效果
* 也行，不过因为一般会自动补全为两个*，所以不常用

示例：

• 相当于在文字前加实心点
  • 按下tab键后会自动缩进一级
    • 再按tab,在缩进一级
      • 再按继续缩进

2.10 有序列表

数字+”.“+空格 前置，回车会自动补全，回车后按下tab键后会缩进一级

1
2
3

1. 我讲三点，这是第一点
2. 这是第二点
3. 这是第三点

示例：

1. 我讲三点，这是第一点
2. 这是第二点
3. 这是第三点
   1. 回车后按tab会缩进
      1. 再按在缩进

2.11 上标

用”^“包围

1
2

如2^10^=1024
参考文献^[1][2]^

示例：

2^10^=1024

参考文献^[1][2]^

2.12 下标

用“~”包围

1

co~2~灭火器

示例：

co2灭火器

2.13 下划线

1

<u>+要下划线的文字+</u>

示例：

下划线

2.14 注释

“[^]”后置

1
2
3

>难忘今宵，明年在相会！[^1]

1:春节联欢晚会

难忘今宵，明年在相会！[^1]

1:春节联欢晚会

2.15 链接

常用“[]”+“()”分别包围文本与链接

1
2

#1 外链（需按住ctrl）：[大家可以访问typora官方中文站](https://typoraio.cn/)
#2 文内跳转（需按住ctrl）：[跳转到 2.3 斜体](#2.3 斜体)

示例：

大家可以访问typora官方中文站

[跳转到 2.3 斜体](#2.3 斜体)

2.16 任务列表

采用“- [ ]”+空格 前置或快捷键ctrl+shift+x

1
2
3
4
5

今天的任务：
- [ ] 送小孩上学
- [ ] 学习typora
- [ ] 接小孩
- [x] 吃饭

示例：

今天的任务：

• 送小孩上学
• 学习typora
• 接小孩
• 吃饭

2.17 表格

直接右键——>插入——>表格

示例：

2.18 图片

直接拖进来或者复制粘贴，设置中可以更改图片的存储方式，更进一步的的学习，可以参照如下链接（引用自CSDN）：

Typora使用技巧之插入图片及图片上传_typora插入图片-CSDN博客

2.19 表情

“：”+表情英文+“：”，具体表情的英文可以参考CSDN中这篇链接：Typora中的emoji表情_typora emoji-CSDN博客

1
2
3

:smile:
:laughing:
:heart_eyes:

示例：

:smile:
:laughing:
:heart_eyes:

三 、其他功能

1、目录

1

[TOC]参见本文档开头

2、数学公式

选择段落——>公式块，采用“$”包围，关于常见的公式语法，可参见CSDN，链接如下：全面整理Typora的Latex数学公式语法_latex数学公式中间回车-CSDN博客

示例：
$$
sin^2+cos^2=1
$$

3、主题样式

在 Typora 中自定义主题可以按照以下步骤进行操作：

1. 找到主题文件夹 打开 Typora 软件，点击菜单栏中的 “文件”，选择 “偏好设置”（在 Mac 系统中是 “Typora” -> “偏好设置”）。在打开的偏好设置窗口中，点击左侧的 “外观” 选项。在右侧找到 “打开主题文件夹” 按钮并点击，这会打开 Typora 的主题文件夹。

2. 选择基础主题（可选） 在主题文件夹中，你会看到许多已经存在的主题文件（.css 格式）。你可以选择一个现有的主题作为基础来进行修改，这样可以减少一些基础样式的编写工作。例如，复制一份 github.css 文件，并将复制后的文件重命名为你想要的新主题名称，比如 my_custom_theme.css。

3. 编辑主题 CSS 文件 使用文本编辑器（如 Notepad++、Sublime Text、Visual Studio Code 等）打开你刚才复制并重命名的 CSS 文件（my_custom_theme.css）。在这个 CSS 文件中，你可以根据自己的喜好修改各种样式。以下是一些常见的样式修改示例：

   • 修改字体：
     • css body { font-family: Arial, sans-serif; /* 这里可以换成你喜欢的字体 */ font-size: 16px; /* 修改字体大小 */ }
   • 修改标题样式：
     • css h1 { color: #333; /* 修改一级标题颜色 */ border-bottom: 2px solid #ccc; /* 在一级标题下方添加边框 */ padding-bottom: 5px; /* 标题下方内边距 */ }
   • 修改代码块样式：
     • css code, pre { background-color: #f4f4f4; /* 修改代码块和行内代码的背景颜色 */ border: 1px solid #ccc; /* 添加边框 */ border-radius: 3px; /* 圆角 */ padding: 2px 4px; /* 内边距 */ }

4. 保存并应用主题：

   完成 CSS 文件的修改后，保存文件。然后回到 Typora 的偏好设置窗口，在 “外观” 选项中，点击 “主题” 下拉菜单，你应该能看到你自定义的主题名称，选择它即可应用你刚刚自定义的主题。 通过以上步骤，你就可以在 Typora 中创建并使用自己的自定义主题了。你可以不断调整 CSS 样式，直到达到你满意的效果。

4、画图

采用typora可进行画图操作，常见流程图、甘特图、时序图、饼图等等，均可通过代码实现。前提在文件——>偏好设置——>markdown——>markdown扩展语法——>勾选图表

1
2
3
4
5
6
7

```mermaid
graph LR;
a-->b
b-->c
c-->d
d-->a
```

1
2
3
4
5

graph LR;
a-->b
b-->c
c-->d
d-->a

四、常用快捷键

以下是typora中常见的快捷键：

五、总结

typora是一款开源的markdown编辑器，给了人们很大的自由创作空间，且非常高效、简洁，相比word更加纯粹，另一方面长期使用typora，可培养程序化的思维，不管工作还是生活，都大有裨益。最后还可以用它写文章，也是一种相当不错的体验。:smile:

一、搭建思路

采用hexo+guihub搭建，全程免费。

步骤：

1、先安装node.js

2、安装git

二、安装的具体步骤

1、安装node

1. 打开node官网：

   Node.js — 在任何地方运行 JavaScript (nodejs.org)

​ 官网

2. 点击下载

3. 安装

​ 安装时一直下一步即可， 建议安装路径选择其他盘符。

4. 打开cmd，查看是否安装成功。

   1 2	node -v npm -v

   

2、安装GIT

1. 打开GIT官网

打开官网：Git (git-scm.com)，下拉选择download for windows

2. 下载GIT

• 点进去后，选择64-bit Git for windows Setup.

• 但因为guihub国内可能存在无法访问的情况，因此若出现页面无法显示的情况，需下载watt tookit.

1
2

#1 进入watt tookit官网，下载windows版本
#2 安装后，点击网络加速-->github-->一键加速，ok

• 打开watt tookit并加速后，再次下载git.
• 安装git

3. 验证是否安装成功

   打开cmd

   1

   git -v

   

3、安装VSCODE

配置时采用vscode比较方便。下载并安装.

1. 官网下载Visual Studio Code - Code Editing. Redefined
2. 安装vscode，安装好后，在扩展里搜索chinese,安装中文插件，重启vscode,ok.

4、安装hexo

1. 进入npm镜像站（阿里）

   输入官网地址：npmmirror 镜像站

2. 主页上复制如下代码：

   npm install -g cnpm –registry=https://registry.npmmirror.com

3. 调出命令提示符，cmd

1

npm install -g cnpm --registry=https://registry.npmmirror.com

4. 调出命令提示符，cmd

   1	cnpm install -g hexo-cli

三、配置

1、vscode

1. 在电脑中新建文件夹，如d:/code/hexo，vscode启动页面中，选择打开hexo文件夹；
2. VSCODE中依次选择终端—>新建终端，在新建终端窗口右侧下拉选择==git bash==

3. 在终端窗口中，输入如下命令：

   1 2 3 4 5 6

   hexo init heo#在hexo文件夹下新建heo文件夹 cd heo#打开heo文件夹 cnpm install#初始化博客框架 hexo g hexo s#出现博客地址http://localhost:4000/ ctrl+c#停止

4. 浏览器中输入http://localhost:4000/，出现博客的初始化页面

   

2、主题设置

2.1 下载主题

1. 进入hexo官网，选择主题

2. 搜索框中输入butterfly

3. 在butterfly主题下，复制相关代码

4. 打开vscode，在终端中输入刚才复制的butterfly主题代码

1

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

5. 再次回到butterfly主题页面，下拉至configuration项目，复制如下代码：

6. 打开vscode，在终端中输入刚才复制的渲染器代码

1

cnpm install hexo-renderer-pug hexo-renderer-stylus

7. 此时可以看到vscode文件夹中themes主题中多了butterfly主题.

2.2 主题配置

1. 在heo中找到_config.yml

2. 在_config.yml代码栏里下拉找到theme:landscape,将landscape替换成butterfly，按ctrl+s保存

3. 在vscode中输入如下代码

   1 2 3

   hexo cl #清除 hexo g #生成静态文件 hexo s #本地查看网页

   复制http://localhost:4000/ 到浏览器中，可以看到主题已经设置成butterfly.

2.3 更改主题图片

1. 进入hexo网站butterfly主题中，下拉点击可查看demo中最终完成后的样子。

2. 点击DOC文档，选择chinese,进入文档查看具体配置方案。

3. 在hexo的根目录创建一个文件用以备份butterfly主题，复制文档中名字

   1	_config.buterfly.yml

4. 打开vscode，在hexo根目录下，右键选择新建文件夹，名字为刚才文档中复制的名称。

5. 点击themes下butterfly主题中的配置文件_config.yml，复制其配置文件代码

6. 进入第4步中刚创建的文件_config.buterfly.yml，将第5步中复制的buterfly配置代码复制到_config.buterfly.yml中

7. 对主题进行更改

   • 更改图片

     1 2 3 4 5 6 7

     进入_config.buterfly.yml配置文件中，找到index_img； 在index_img后输入你想替换的图片的URL，按ctrl+s保存； 在vscode终端输入窗口中依次输入： hexo cl hexo g hexo s 进入网页中输入http://localhost:4000/ 可以看到主题里的背景图片已变成你替换后的图片

   • 更改图片的另一种方法

     1 2 3 4 5 6

     点击heo-->thmes-->source-->img 将你想要替换的图片拖入到img文件夹中，可修改文件名，如top.jpg 在vscode中点开_config.buterfly.yml配置文件 找到index_img,输入/img/top.jpg,ctrl+s保存 运行hexo s 在浏览器中输入http://localhost:4000/，查看此时图片已变化

2.4 更改标题

1. 进入heo下的根目录，找到_config.yml

2. 在代码栏里找到title、author等,可根据需要进行修改.

   1 2	title:martin's blog author:martin

3. hexo s，在浏览器中查看修改后的标题和作者

3、部署到网页

3.1 注册guithub

1. 进入guihub官网，按照步骤进行注册，过程需要提供邮箱，以及进行相关验证。
2. 登录guihub

3.2 在guithub中新建仓库

1. 在guihub右上角点击“+”，在下拉菜单中，选择“new repository”
2. 在”repository name”栏中填入你的仓库名，如blog
3. “Description (optional)”为描述，选填。可填入：我的博客
4. 下面勾选“public”，选择后公众可访问
5. 勾选“Add a README file”
6. 点击“create repository”
7. 新的仓库创建完成

3.3 获取密钥

1. 在guihub页面中点击头像，选择”settings”
2. 下拉到底，选择“developer settings”
3. 点击“personal access tokens”,选择“tokens(classic)”
4. 点击“Generate new token”,选择“Generate new token（classic）”
5. 在note栏中，输入密钥概述，可随便输入，如：for blog
6. “Expiration”栏中选择该密钥的有效期，可随便选择，如90 days
7. 勾选“repo”,点击“generate token”

3.4 配置

1. 进入vscode,在_config.yml中找到deploy,在其中输入

   1 2 3

   type：git repo:git@github.com:your_username/your_username.github.io.git branch:main#新建仓库中的分支名

   然后运行如下命令：

   1 2 3

   hexo cl hexo g hexo d

   运行后可能会出现以下错误：error ：spawn failed

   此时需要重新配置ssh,参照此篇博客内容进行操作解决ssh: connect to host github.com port 22: Connection refused - Biile - 博客园 (cnblogs.com)

3.5 托管

将网站托管到cloudflare，可参考从0到1搭建免费个人博客，保姆级教程！无服务器、零代码、国内/国外网络，流畅访问！「Cloudflare + GitHub + Hexo」_哔哩哔哩_bilibili

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment