MarkDown技巧:两种方式实现页内跳转

摘要:
MarkDown技术:有两种方法可以跳转到页面上的电子邮件地址:JohnTsai.Work@gmail.com,欢迎交流讨论。我喜欢MarkDown简单直观的写作风格。

MarkDown技巧:两种方式实现页内跳转

本人邮箱:JohnTsai.Work@gmail.com,欢迎交流讨论。
欢迎转载,转载请注明网址:http://www.cnblogs.com/JohnTsai
个人博客地址:http://johntsaiandroid.github.io


跳转到的地方未看完全文请忽略这个:)

最近,无论是在博客园还是在自己的博客写文章,都是用的MarkDownPad2写的。喜欢MarkDown这种简单直观的写作方式。




MarkDown写作

但是写文章时,突然发现如果写了一篇很长的文章,要是没有目录的话。阅读起来十分不便。页内跳转就能很好的解决这个问题。

如下图中的目录一样。
MarkDown技巧:两种方式实现页内跳转第2张

Google了一下,有两种方式在MarkDown中实现这两个功能:

  1. MarkDown实现

生成目录的方法:

* [1.语法示例](#1)

* [1.1图片](#1.1)

* [1.2换行](#1.2)

* [1.3强调](#1.3)

生成效果:

在正文中,只要将章节标题的id对应上去即可:

<h2 id="1">1.语法示例</h2>

这是第一段

这是第一段

这是第一段

这是第一段

这是第一段

<h3 id="1.1">1.1图片</h3>

这是第一段第一节

这是第一段第一节

这是第一段第一节

这是第一段第一节

这是第一段第一节

<h3 id="1.2">1.2换行</h3>

这是第一段第二节

这是第一段第二节

这是第一段第二节

这是第一段第二节

这是第一段第二节

<h3 id="1.1">1.3强调</h3>

这是第一段第三节

这是第一段第三节

这是第一段第三节

这是第一段第三节

这是第一段第三节

生成效果:

1.语法示例

这是第一段
这是第一段
这是第一段
这是第一段
这是第一段

1.1图片


这是第一段第一节
这是第一段第一节
这是第一段第一节
这是第一段第一节
这是第一段第一节

1.2换行


这是第一段第二节
这是第一段第二节
这是第一段第二节
这是第一段第二节
这是第一段第二节

1.3强调


这是第一段第三节
这是第一段第三节
这是第一段第三节
这是第一段第三节
这是第一段第三节

点击目录,发现可以页内跳转了。

2.html标签实现

  1. 定义一个锚(id): <span id="jump">跳转到的地方</span>
  2. 使用markdown语法:[点击跳转](#jump)

在文章末尾设置一个锚,然后跳转到文章开始的地方。

点击跳转

如果喜欢,觉得有收获,请点推荐,谢谢!

给我打赏,buy me a cup of coffee!

MarkDown技巧:两种方式实现页内跳转第3张

免责声明:文章转载自《MarkDown技巧:两种方式实现页内跳转》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇愿你走出半生,归来仍是Java Parservue.js(3)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

C#正则表达式引发的CPU跑高问题以及解决方法团队

3月23日(周日)下午16:30左右,博客园主站负载均衡中的2台Web服务器CPU玩起了爬楼梯的游戏(见上图),一直爬到了接近100%。发现这个状况后,我们立即将这2台阿里云临时磁盘云服务器从负载均衡中摘下来,挂上1台云盘云服务器,恢复了正常。 由于曾经多次遇到过阿里云云服务器CPU问题,现在对阿里云云服务器产生了一种偏见,只要出现CPU问题,就会首先怀...

本地快速搭建MarkDown语法网站

主要是在之前跟人学的快速搭建一个简单的网站,可以通过这样的方式把相关的文档美美的放在服务器上,然后给别人看也好,自己也能熟系熟系MarkDown的语法并学习,要是接口文档还是推荐通过swagger去实现。 首页效果图 主要使用docsify文档系统 官方github地址:https://github.com/docsifyjs/docsify-cl...

MarkDown添加图片的三种方式

Markdown插图片有三种方法,各种Markdown编辑器的插图方式也都包含在这三种方法之内。 插图最基础的格式就是: ![Alt text](图片链接 "optional title") 插入本地图片 只需要在基础语法的括号中填入图片的位置路径即可,支持绝对路径和相对路径。例如: ![avatar](/home/picture/1.png) 插入网...

Markdown温故知新(0):导航目录

Markdown温故知新(0):导航目录 Markdown温故知新(1):Markdown面面观 Markdown温故知新(2):详解七大标准语法 Markdown温故知新(3):六个实用扩展语法 Markdown温故知新(4):更多扩展语法及HTML Markdown温故知新(5):Markdown编辑器 下面介绍一下我是如何开始 Markdown...

Sublime下MarkDown插件实现编辑和实时预览并转换成HTML格式

最近在使用markdown做笔记,编辑器Sublime Text3用起来很轻巧,现在让他支持markdown的语法并且可以实时预览。 安装准备——安装Package Control Package Control是一个开源的用于插件管理的插件,在为Sublime安装其他插件之前,需要安装它。它有两种安装方式Simple和Manual。此处我们选择simp...

markdown语法

一级标题 二级标题 三级标题 无序列表 1 2 3 有序列表 1 2 3 这里引用asdfasdfasf asdf s asdf 要注意符号与文本的空格 插入链接 百度 插入图片 粗体 斜体 表格 Tables Are Cool col 3 is right-aligned $1600 col 2 is centered $12...