百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

Hexo搭建个人网站Markdown语法糖

bigegpt 2024-09-16 12:20 5 浏览

一、前言

在上一篇文章中,我们介绍了什么是Hexo,以及使用Hexo搭建个人网站(博客)的步骤,托管到GitHub的步骤,以及一些常用插件的使用与安装。


在上一篇文章介绍什么是Hexo的时候,提到Hexo使用Markdown解析文章,所以本篇文章我们就来学习下Markdown语法的相关知识。


在学习Markdown语法之前,我先给大家列一些Hexo搭建博客经常遇到的问题及解决方案。


二、No Layout:index.html问题


2.1、问题描述


之前对Hexo以及Next主题做了版本更新,更新之后在执行 hexo g 编译时出现了 No layout:index.html 的错误,如下图:


2.2、解决方案:


1.查看hexo插件安装情况,因内容较多,只部分截图:

npm ls --depth 0




2. hexo的一些插件未安装

npm ERR! peer dep missing: eslint@>= 4.12.1, required by babel-eslint@10.0.3
npm ERR! peer dep missing: eslint@>= 4.12.1, required by babel-eslint@10.0.3


3. 逐一安装缺失的插件

npm install eslint --save


4. 执行npm install后,执行npm audit fix


三、访问Hexo博客出现“Cannot GET/xxx”错误


3.1、问题描述


在Hexo博客中,出现 Cannot GET/xxx 错误便意味着 xxx文件未被找到


Cannot GET/xxx 错误本质是 hexo server 返回的一个 404 错误



3.2、解决方案


1. 判断public目录xxx文件是否存在。


2. 如果说xxx.html不存在,那么执行 hexo chexo g 重新生成一次,回到步骤1。


3. 步骤2执行完后xxx.html仍不存在,执行 npm audit fix ,查看是否少了什么组件,通过 npm install hexo-xxx-xxx 安装即可。


4. 步骤3完成之后,执行 hexo chexo g 重新生成静态文件。


5. 仍然有问题,请再参考此文:<https://www.cnblogs.com/Sroot/p/6305938.html>


下面就进入今天的正题:Markdown语法糖。


四、什么是Markdown


4.1、Markdown介绍

Markdown 是一种轻量级的标记语言,其用简单的标记语法便可达到排版的目的,可以使我们更加专注于内容的编写,而不需过多关注排版。

本文主要整理了 Markdown 中的常用的标记语法,以便自己与他人以后查用。


4.2、Markdown的优点

  • 纯文本,所以兼容性极强,可以用所有文本编辑器打开。
  • 让你专注于文字而不是排版。
  • 格式转换方便,Markdown 的文本你可以轻松转换为 html、电子书等。
  • Markdown 的标记语法有极好的可读性。


4.3、Markdown的缺点

  • 需要记一些语法(当然,是很简单。五分钟学会)。
  • 有些平台不支持Markdown编辑模式。


五、基本语法


5.1、标题


在想要设置为标题的文字前面加#来表示,一个#是一级标题二个#是二级标题,以此类推。支持六级标题


注意:#与文字之间要有一个空格。


示例:

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


效果如下:


5.2、字体


星号或者下划线都可以,单是斜体,双是粗体,符号可以跨行,符号可加空格。

  • 加粗:要加粗的文字左右分别用两个*号包起来。
  • 斜体:要倾斜的文字左右分别用一个*号包起来。
  • 斜体加粗:要倾斜和加粗的文字左右分别用三个*号包起来。
  • 删除线:要加删除线的文字左右分别用两个~~号包起来。


示例:

**这是加粗的文字**
*这是倾斜的文字*`
***这是斜体加粗的文字***
~~这是加删除线的文字~~


效果如下:


5.3、引用


在引用的文字前加>即可。引用也可以嵌套,如加两个>> 三个>>> n个... 貌似可以一直加下去,但没神马卵用。


示例:

>这是引用的内容
>>这是引用的内容
>>>>>>>>>>这是引用的内容


效果如下:


5.4、分割线


三个或者三个以上的 - 或者 * 都可以。


示例:

---
----
***
*****


效果如下:

可以看到,显示效果是一样的。


5.5、图片


语法:

![图片alt](图片地址 ''图片title'')
  • 图片alt就是显示在图片下面的文字,相当于对图片内容的解释。
  • 图片title是图片的标题,当鼠标移到图片上时显示的内容。title可加可不加。


示例:

![一脸懵逼](https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558179968948&di=1c8a7432843fdaafb91e9cbffacd1557&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201608%2F02%2F20160802213915_x23St.thumb.700_0.jpeg "一脸懵逼")


效果如下:


5.6、超链接


语法:

[超链接名](超链接地址 "超链接title")
title可加可不加


示例:

[简书](http://jianshu.com)
[百度](http://baidu.com)


效果如下:


注:Markdown本身语法不支持链接在新页面中打开,如果想要在新页面中打开的话可以用html语言的a标签代替。

<a href="超链接地址" target="_blank">超链接名</a>


示例

<a href="https://www.jianshu.com/u/1f5ac0cf6a8b" target="_blank">简书</a>


5.7、索引超链接


示例:

[百度][1]
[1]:http://www.baidu.com

效果如下:


5.8、自动链接


语法:使用尖括号


示例:

<http://www.baidu.com>
<1111111@qq.com>


效果如下:



5.9、列表


5.9.1、无序列表


语法:

无序列表用 - + * 任何一种都可以。

- 列表内容
+ 列表内容
* 列表内容

注意:- + * 跟内容之间都要有一个空格。


效果如下:



5.9.2、有序列表


语法:数字加点

1. 列表内容
2. 列表内容
3. 列表内容

注意:序号跟内容之间要有空格。


效果如下:



5.9.3、嵌套列表


语法:上一级和下一级之间敲三个空格即可。

+ 一级无序列表内容

   + 二级无序列表内容
   + 二级无序列表内容
   + 二级无序列表内容

**********************************************

+ 一级无序列表内容
   1. 二级有序列表内容
   2. 二级有序列表内容
   3. 二级有序列表内容

-----------------------------------------------


效果如下:


1. 一级有序列表内容


   + 二级无序列表内容
   + 二级无序列表内容
   + 二级无序列表内容


*****************************************************


2. 一级有序列表内容


   1. 二级有序列表内容
   2. 二级有序列表内容
   3. 二级有序列表内容



注意:在使用列表时,只要是数字后面加上英文的点,就会无意间产生列表,比如2019.5.18 这时候想表达的是日期,有些软件把它被误认为是列表。

解决方式:在每个点前面加上\就可以了。如下示例:

2019\.5\.18

效果如下:


5.10、表格


5.10.1、Markdown表格


语法:

|表头|表头|表头|
|---|:---:|---:|
|内容|内容|内容|
|内容|内容|内容|


第二行分割表头和内容。
- 有一个就行,为了对齐,多加了几个
文字默认居左
-两边加:表示文字居中
-右边加:表示文字居右
注:原生的语法两边都要用 | 包起来。此处省略

示例1:

| 法号        | 本领    |  排行  |
| :--------:  | :-----: | :----: |
| 悟空        | 72变    |  大师兄|
| 悟能        | 36变    |  二师哥|
| 悟净        | 18变    |  三师弟|

效果如下:

示例2:

表头1  | 表头2
------------- | -------------
Content Cell  | Content Cell
Content Cell  | Content Cell


| 表头1  | 表头2|
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |


| 名字 | 描述          |
| ------------- | ----------- |
| Help      | Display the help window.|
| Close     | Closes a window     |


#表格中也可以使用普通文本的删除线,斜体等效果


| 名字 | 描述          |
| ------------- | ----------- |
| Help      | ~~Display the~~ help window.|
| Close     | _Closes_ a window     |


#表格可以指定对齐方式


| 左对齐 | 居中  | 右对齐 |
| :------------ |:---------------:| -----:|
| col 3 is      | some wordy text | $1600 |
| col 2 is      | centered        |   $12 |
| zebra stripes | are neat        |    $1 |

效果如下:

5.10.2、HTML表格


语法:

<table>
  <tr>
    <th>项目1</th>
    <th>项目2</th>
    <th>项目3</th>
  </tr>
  <tr>
    <td>a1</td>
    <td colspan="2">a2</td>
  </tr>
  <tr>
    <td rowspan="2">b1</td>
    <td>b2</td>
    <td>b3</td>
  </tr>
  <tr>
    <td>c2</td>
    <td>c3</td>
  </tr>
</table>


效果如下:


需要注意的一点是,在markdown中使用html代码来实现表格的效果,需要在表格的外面套上:

<escape></escape>

<escape>(转义),防止markdown直接将代码中的行进行转义成回车,不然会出现表格前空了一大块空白。


但同时,引入html会使得markdown的易读易写的特性降低。除非必要,还是推荐使用markdown本身的表格语法。

那么,我们如何在使用html表格的时候,偷懒不用打这段表格呢?


[http://www.tablesgenerator.com/]

安利这个网站,它可以实现你的需求,包括合并单元格等。


5.11、代码


5.11.1、单行代码


语法:代码之间分别用一个反引号包起来

`代码内容`


示例:

`create database hero;`


效果如下:


5.11.2、代码块


语法:代码之间分别用三个反引号包起来,且两边的反引号单独占一行

(```)
  代码...
  代码...
  代码...
(```)

注:为了防止转译,前后三个反引号处加了小括号,实际是没有的。这里只是用来演示,实际中去掉两边小括号即可。


示例:

(```)
    function fun(){
         echo "这是一句非常牛逼的代码";
    }
    fun();
(```)


效果如下:


5.12、注释


语法:用html的注释。

<!-- 用html的注释 -->


5.13、转义字符


Markdown中的转义字符为\,转义的有:

\\ 反斜杠
\` 反引号
\* 星号
\_ 下划线
\{\} 大括号
\[\] 中括号
\(\) 小括号
\# 井号
\+ 加号
\- 减号
\. 英文句号
\! 感叹号


效果如下:


5.14、流程图


语法如下:

st=>start: 开始
op=>operation: My Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op


效果如下:


5.16、段落与换行

Markdown中段落指连续的一段文字,编写时段落之间至少一个 空行 隔开,段落内多个空格被视为一个空格,段首不支持缩进。

如何想要在显示时显示多个空行,可以插入实现,注意的是,插入的应与前后的段落中间至少空一行。


5.17、段落缩进(空格)


示例:

半方大的空白?或?看,飞碟
全方大的空白?或?看,飞碟
不断行的空白格 或 看,飞碟
??段落从此开始。


效果如下:


5.18、字体、字号、颜色、背景色


示例:

<font face="黑体">我是黑体字</font>
<font face="微软雅黑">我是微软雅黑</font>
<font face="STCAIYUN">我是华文彩云</font>
<font color=#0099ff size=12 face="黑体">黑体</font>
<font color=#00ffff size=3>null</font>
<font color=gray size=5>gray</font>
<table><tr><td bgcolor=#FF4500>这里的背景色是:OrangeRed,  十六进制颜色值:#FF4500, rgb(255, 69, 0)</td></tr></table>

效果如下:


六、快捷键

功能

快捷键

加粗

Ctrl + B

斜体

Ctrl + I

引用

Ctrl + Q

插入链接

Ctrl + L

插入代码

Ctrl + K

插入图片

Ctrl + G

提升标题

Ctrl + H

有序列表

Ctrl + O

无序列表

Ctrl + U

横线

Ctrl + R

撤销

Ctrl + Z

重做

Ctrl + Y


七、GitHub特有特性


7.1、复选框列表


在列表符号后面加上[]或者[x]代表选中或者未选中情况。


示例:

+ [x] C
+ [x] C++
+ [x] Java
+ [x] Qt
+ [x] Android
+ [ ] C#
+ [ ] .NET

效果如下:


7.2、emoji表情符号


emoji表情使用:EMOJICODE:的格式,详细列表可见:

https://www.webpagefx.com/tools/emoji-cheat-sheet/

当然现在很多markdown工具或者网站都不支持。


下面列出几个平台的对比:

工具/网站

emoji

简书

github

有道云笔记

相关推荐

最全的MySQL总结,助你向阿里“开炮”(面试题+笔记+思维图)

前言作为一名编程人员,对MySQL一定不会陌生,尤其是互联网行业,对MySQL的使用是比较多的。对于求职者来说,MySQL又是面试中一定会问到的重点,很多人拥有大厂梦,却因为MySQL败下阵来。实际上...

Redis数据库从入门到精通(redis数据库设计)

目录一、常见的非关系型数据库NOSQL分类二、了解Redis三、Redis的单节点安装教程四、Redis的常用命令1、Help帮助命令2、SET命令3、过期命令4、查找键命令5、操作键命令6、GET命...

netcore 急速接入第三方登录,不看后悔

新年新气象,趁着新年的喜庆,肝了十来天,终于发了第一版,希望大家喜欢。如果有不喜欢看文字的童鞋,可以直接看下面的地址体验一下:https://oauthlogin.net/前言此次带来得这个小项目是...

精选 30 个 C++ 面试题(含解析)(c++面试题和答案汇总)

大家好,我是柠檬哥,专注编程知识分享。欢迎关注@程序员柠檬橙,编程路上不迷路,私信发送以下关键字获取编程资源:发送1024打包下载10个G编程资源学习资料发送001获取阿里大神LeetCode...

Oracle 12c系列(一)|多租户容器数据库

作者杨禹航出品沃趣技术Oracle12.1发布至今已有多年,但国内Oracle12C的用户并不多,随着12.2在去年的发布,选择安装Oracle12c的客户量明显增加,在接下来的几年中,Or...

flutter系列之:UI layout简介(flutter-ui-nice)

简介对于一个前端框架来说,除了各个组件之外,最重要的就是将这些组件进行连接的布局了。布局的英文名叫做layout,就是用来描述如何将组件进行摆放的一个约束。在flutter中,基本上所有的对象都是wi...

Flutter 分页功能表格控件(flutter 列表)

老孟导读:前2天有读者问到是否有带分页功能的表格控件,今天分页功能的表格控件详细解析来来。PaginatedDataTablePaginatedDataTable是一个带分页功能的DataTable,...

Flutter | 使用BottomNavigationBar快速构建底部导航

平时我们在使用app时经常会看到底部导航栏,而在flutter中它的实现也较为简单.需要用到的组件:BottomNavigationBar导航栏的主体BottomNavigationBarI...

Android中的数据库和本地存储在Flutter中是怎样实现的

如何使用SharedPreferences?在Android中,你可以使用SharedPreferencesAPI来存储少量的键值对。在Flutter中,使用Shared_Pref...

Flet,一个Flutter应用的实用Python库!

▼Flet:用Python轻松构建跨平台应用!在纷繁复杂的Python框架中,Flet宛如一缕清风,为开发者带来极致的跨平台应用开发体验。它用最简单的Python代码,帮你实现移动端、桌面端...

flutter系列之:做一个图像滤镜(flutter photo)

简介很多时候,我们需要一些特效功能,比如给图片做个滤镜什么的,如果是h5页面,那么我们可以很容易的通过css滤镜来实现这个功能。那么如果在flutter中,如果要实现这样的滤镜功能应该怎么处理呢?一起...

flutter软件开发笔记20-flutter web开发

flutterweb开发优势比较多,采用统一的语言,就能开发不同类型的软件,在web开发中,特别是后台式软件中,相比传统的html5开发,更高效,有点像c++编程的方式,把web设计出来了。一...

Flutter实战-请求封装(五)之设置抓包Proxy

用了两年的flutter,有了一些心得,不虚头巴脑,只求实战有用,以供学习或使用flutter的小伙伴参考,学习尚浅,如有不正确的地方还望各路大神指正,以免误人子弟,在此拜谢~(原创不易,转发请标注来...

为什么不在 Flutter 中使用全局变量来管理状态

我相信没有人用全局变量来管理Flutter应用程序的状态。毫无疑问,我们的Flutter应用程序需要状态管理包或Flutter的基本小部件(例如InheritedWidget或St...

Flutter 攻略(Dart基本数据类型,变量 整理 2)

代码运行从main方法开始voidmain(){print("hellodart");}变量与常量var声明变量未初始化变量为nullvarc;//未初始化print(c)...