前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP最新优惠活动
返回腾讯云官网
社区首页 >专栏 >Typecho上的Markdown 编辑器语法指南

Typecho上的Markdown 编辑器语法指南

作者头像
听闻所见
发布于 2023-08-02 11:01:39
1.2K0
发布于 2023-08-02 11:01:39
举报
文章被收录于专栏：听闻

Markdown是一种纯文本格式的标记语言

优点： 1.因为是纯文本，所以只要支持Markdown的地方都能获得一样的编辑效果，可以让作者摆脱排版的困扰，专心写作。 2.操作简单。比如:WYSIWYG编辑时标记个标题，先选中内容，再点击导航栏的标题按钮，选择几级标题。要三个步骤。而 Markdown只需要在标题内容前加#即可 缺点： 1.需要记一些语法（当然，是很简单。五分钟学会）。 2.有些平台不支持 Markdown 编辑模式。

1.标题

在想要设置为标题的文字前面加#来表示 一个#是一级标题，二个#是二级标题，以此类推。支持六级标题。 注：标准语法一般在#后跟个空格再写文字。 示例如下：

代码语言：javascript
复制
#  这是一级标题
##  这是二级标题
###  这是三级标题
####  这是四级标题
·······

这是一级标题

这是二级标题

这是三级标题

这是四级标题

...

2.字体

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

代码语言：javascript
复制
**这是加粗的文字**
*这是倾斜文字*
***这是斜体加粗的文字***
~~这是加删除线的文字~~

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

3.引用

我们可能希望对某段文字进行强调处理，Markdown提供了一个特殊符号>用于段首进行强调，被强调的文字部分将会高亮显示。引用也可以嵌套，如加两个 >> 三个>>> n个... 示例如下：

代码语言：javascript
复制
>这是引用的内容
>>这是引用的内容

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

4.分割线

三个或者三个以上的 - 或者*都可以。 示例如下：颜色有点浅，好像都差不多的

代码语言：javascript
复制
---
***

5.图片或链接

添加图片或链接，引用图片和链接的唯一区别就是在最前方添加一个感叹号 示例如下:

代码语言：javascript
复制
[点击跳转至百度](http://www.baidu.com)
![图片](https://itggg.cn/cdn/admin.svg)

点击跳转至百度

6.列表

Markdown支持有序列表和无序列表两种形式，注意：- + 跟内容之间都要有一个空格。无序列表使用 或+ 或-标识，符号后加空格。有序列表使用数字加.示例如下:

代码语言：javascript
复制
- 列表内容
+ 列表内容
* 列表内容

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

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

7.代码块

使用反引号`进行包裹即可。如果是行内代码引用，使用单个反引号进行包裹，整段代码用三个包裹，并在后面标记语言，很多人不知道怎么输入反引号。在英文模式下，找到键盘最左侧esc键下面的第一个键点击即可。示例如下

行内代码

代码语言：javascript
复制
<!DOCTYPE HTML> 这是HTML ```HTML
<html class="no-js">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="renderer" content="webkit">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>编辑 Markdown 编辑器语法指南 - Flat tire - Powered by Typecho</title>
        <meta name="robots" content="noindex, nofollow">
    </body>
</html>



<?php $this->need('includes/hero.php'); ?> 这是PHP  ```PHP
<div class="All_Page_width">
    <div class="All_Page_title">
        #标签云
    </div>
    <?php $this->widget('Widget_Metas_Tag_Cloud', 'sort=count&ignoreZeroCount=1&desc=1&limit=50')->to($tags); ?>
    <div class="Tags_Cloud">
        <?php $this->content(); ?>
        <?php if ($tags->have()) : ?>
            <?php while ($tags->next()) : ?>

8.插入表格

  1. |、-、:之间的多余空格会被忽略，不影响布局。
  2. 默认标题栏居中对齐，内容居左对齐。
  3. -:表示内容和标题栏居右对齐，:-表示内容和标题栏居左对齐，:-:表示内容和标题栏居中对齐。
  4. 内容和|之间的多余空格会被忽略，每行第一个|和最后一个|可以省略，-的数量至少有一个。 示例如下
代码语言：javascript
复制
name | 价格 |  数量  
-|-|-
香蕉 | $1 | 5 
苹果 | $1 | 6 
草莓 | $1 | 7

name

111

222

333

444

aaa

bbb

ccc

ddd

eee

fff

ggg

hhh

iii

000

代码语言：javascript
复制
name | 111 | 222 | 333 | 444
:-: | :-: | :-: | :-: | :-:
aaa | bbb | ccc | ddd | eee 
fff | ggg| hhh | iii | 000

9.空格和换行

和HTML语言一致， & nbsp;< /br >

代码语言：javascript
复制
你&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好 （空格）
</br>
你
好 （换行）

示例如下：

你       好 （空格） 你 好 （换行）

10.键盘按钮

使用 Ctrl+Alt+Del 重启电脑

代码语言：javascript
复制
使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑

11.各种标签

11.1 进度条 带有提示标签的进度条 将设置了 .sr-only 类的 标签从进度条组件中移除 类，从而让当前进度显示出来

60%

代码

代码语言：javascript
复制
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

低百分比进度条

在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性

0%

2%

代码

代码语言：javascript
复制
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

根据情境变化效果

进度条组件使用与按钮和警告框相同的类，根据不同情境展现相应的效果。

40% Complete (success)

20% Complete

60% Complete (warning)

80% Complete (danger)

代码

代码语言：javascript
复制
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

条纹效果

通过渐变可以为进度条创建条纹效果，IE9 及更低版本不支持。

40% Complete (success)

20% Complete

60% Complete (warning)

80% Complete (danger)

代码

代码语言：javascript
复制
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

堆叠效果

把多个进度条放入同一个.progress 中，使它们呈现堆叠的效果。

35% Complete (success)

20% Complete (warning)

10% Complete (danger)

代码

代码语言：javascript
复制
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

11.2可用的变体

用下面的任何一个类即可改变标签的外观

DefaultPrimarySuccessInfoWarningDanger

代码

代码语言：javascript
复制
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

11.3 警告框

警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息。

...

...

...

...

代码

代码语言：javascript
复制
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

12文章段落内引入图标

代码语言：javascript
复制
<i class="iconfont icon-github"></i>
<i class="iconfont icon-weixin"></i> 
<i class="iconfont icon-aiqiyi"></i> 
<i class="iconfont icon-zhifubao"></i>

13 文章段落symbol 引用

代码语言：javascript
复制
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-denglong"></use>
</svg>

14 外链卡片调用

1.1. title：必填，外链的名称/标题 1.2. url：必填，外链的地址（请填写绝对地址，就是浏览器地址栏什么样的就填什么样的） 1.3. intro：（可选）外链网站的简介/介绍 1.4. cover：（选填）外链网站的介绍图片地址

友人C

一个个人博客

代码

代码语言：javascript
复制
[ 
post url="https:\/\/www.ihewro.com" title="友人C" intro="一个个人博客" cover="https://**.png" / 
]

15标签tag

默认白色文字 紫色文字 蓝色文字 黄色文字 红色文字 绿色文字 黑色文字

代码

代码语言：javascript
复制
[
tag]默认白色文字[/tag]
[
tag type="primary"]紫色文字[/tag]
[
tag type="info"]蓝色文字[/tag]
[
tag type="warning"]黄色文字[/tag]
[
tag type="danger"]红色文字[/tag]
[
tag type="success"]绿色文字[/tag]
[
tag type="dark"]黑色文字[/tag]

16时间线

2020大事记

2020-1-20

武汉封城，疫情让一起变得慌乱起来

2020-3-20

开始远程办公，慢慢有序起来

生活变得好起来了

2020-10-1

国庆节去哈尔滨旅行，和老同学见面

代码

代码语言：javascript
复制
[timeline title="2020大事记" type="small" start="梦开始的地方" end="新的一年开始"]
[item date="2020-1-20"] 武汉封城，疫情让一起变得慌乱起来 [/item]
[item date="2020-3-20"] 开始远程办公，慢慢有序起来[/item]
[item]生活变得好起来了[/item]
[item date="2020-10-1"] 国庆节去哈尔滨旅行，和老同学见面[/item][/timeline]

17计划表

计划表中包含了三种类型的任务：

  • check类型，该类型任务只有两种状态，完成和未完成
  • progress，该类型任务可以显示任务执行的进度，需要手动填写进度
  • start、end，该类型任务设置一个起始时间和终止时间，进度会根据当前时间自动更新进度
  • 时间格式：必须是正确的时间格式，比如2021-01-02 12:00 ，也可以只写日期2021-01-02 2021的小目标 每天早睡 每天早起 阅读10本书 ： 50% 每天锻炼30分钟 ： 346%

代码

代码语言：javascript
复制
[goal title="2021的小目标"]
[item check="true"] 每天早睡 [/item]
[item check="false"] 每天早起 [/item]
[item progress="50%"] 阅读10本书 [/item]
[item start="2021-01-02" end="2021-10-1"] 每天锻炼30分钟 [/item]
[/goal]

18视频播放器

有两款代码可以实现 效果1：不能全屏

代码

代码语言：javascript
复制
<iframe align="center" width="100%" height="500px" src="https://bili.sangxuesheng.com/player/?url=（视频链接）"frameborder="no" border="0"  scrolling="no"marginwidth="0" marginheight="0" ></iframe>

效果2： 可以全屏

代码

代码语言：javascript
复制
<iframe src="https://bili.sangxuesheng.com/player/?url=(视频链接)" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen" width="100%" height="500px" frameborder="0"></iframe>

可以解析bilibi

代码语言：javascript
复制
<iframe src="https://jx.parwix.com:4433/player/?url=(视频链接)" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen" width="100%" height="500px" frameborder="0"></iframe>

19视频播放器

方法1

代码

代码语言：javascript
复制
[vplayer url="http://xxx.com/xxx.mp4" pic="http://xxx.com/xxx.png"]

方法2

默认使用的第三方云解析视频地址 https://okjx.cc/?url=，支持b站、爱奇艺、优酷等常见平台

正在播放：抱歉 Louis C.K.: Sorry (2021)

剧集列表

抱歉 Louis C.K.: Sorry (2021) 一根弦

代码

代码语言：javascript
复制
[vplayer status="true"]
[Video url="https://www.bilibili.com/video/BV1Bi4y1d7if" title="抱歉 Louis C.K.: Sorry (2021) " /]
[Video url="https://www.bilibili.com/video/BV1RL4y1J7wJ" title="一根弦" /]
[/vplayer]

20挂载bilibili

代码语言：javascript
复制
<div class="video">
<iframe src="//player.bilibili.com/player.html?aid=657099346&bvid=BV1Lh4y1R798&cid=1158402282&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>

部分内容引用自爆胎

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-02-04，如有侵权请联系 cloudcommunity@tencent.com 删除
markdown
class
typecho
编辑器
语法

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

markdown
class
typecho
编辑器
语法
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
LV.
文章
0
获赞
0
目录
  • Markdown是一种纯文本格式的标记语言
  • 1.标题
  • 这是一级标题
    • 这是二级标题
      • 这是三级标题
    • 2.字体
      • 3.引用
        • 4.分割线
          • 5.图片或链接
            • 6.列表
              • 7.代码块
                • 8.插入表格
                  • 9.空格和换行
                    • 10.键盘按钮
                      • 11.各种标签
                        • 12文章段落内引入图标
                          • 13 文章段落symbol 引用
                            • 14 外链卡片调用
                              • 15标签tag
                                • 16时间线
                                  • 17计划表
                                    • 18视频播放器
                                      • 19视频播放器
                                        • 20挂载bilibili
                                        领券

                                        腾讯云开发者

                                        扫码关注腾讯云开发者

                                        扫码关注腾讯云开发者

                                        领取腾讯云代金券

                                        热门产品

                                        热门推荐

                                        更多推荐

                                        Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

                                        深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

                                        腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

                                        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

                                        Copyright © 2013 - 2024 Tencent Cloud.

                                        All Rights Reserved. 腾讯云 版权所有

                                        登录 后参与评论