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

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


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

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




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

如下图中的目录一样。

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技巧:两种方式实现页内跳转的更多相关文章

  1. ios 实现跳转到评价界面的两种方式

    要想在App内跳转到特定App的详情页或者评论页,首先需要获取到App的id.在 iTunes Connect网站上登陆之后,选择“我的App”,然后点击某个特定的App进入,在App信息的综合信息中 ...

  2. Django学习——ajax发送其他请求、上传文件(ajax和form两种方式)、ajax上传json格式、 Django内置序列化(了解)、分页器的使用

    1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...

  3. 将html页改成jsp的两种方式

    将html页改成jsp的两种方式 作者: 字体:[增加 减小] 类型:转载 时间:2013-08-13 将html页改成jsp有两种方法,第一种是直接修改html文件,另一种是新建jsp文件.下面为大 ...

  4. Oracle并行更新的两种方式(merge/update内联视图)

    对于Oracle的两表联合更新的场景(有A.B两表,以A.id=B.id关联,根据B表中的记录更新A表中的相应字段),一般有update内联视图和merge两种方式,下面举例介绍:   创建用例表: ...

  5. 解决 SharePoint 2010 拒绝访问爬网内容源错误的小技巧(禁用环回请求的两种方式)

    这里有一条解决在SharePoint 2010搜索爬网时遇到的“拒绝访问错误”的小技巧. 首先要检查默认内容访问帐户是否具有相应的访问权限,或者添加一条相应的爬网规则.如果目标资源库是一个ShareP ...

  6. 通过调用C语言的库函数与在C代码中使用内联汇编两种方式来使用同一个系统调用来分析系统调用的工作机制

    通过调用C语言的库函数与在C代码中使用内联汇编两种方式来使用同一个系统调用来分析系统调用的工作机制 前言说明 本篇为网易云课堂Linux内核分析课程的第四周作业,我将通过调用C语言的库函数与在C代码中 ...

  7. 常用Markdown公式整理 && 页内跳转注意 && Markdown preview

    目录: 常用Markdown公式及注意事项 标题 列表 链接 区块 代码块 / 引用  粗体和斜体 文字块 图片 表格 横线 页内跳转注意事项 其他重要需注意 Markdown preview 前提: ...

  8. Markdown页内跳转实现方法

    目录 Markdown页内跳转实现方法 HTML锚点跳转 生成目录 Markdown页内跳转实现方法 [时间:2017-02] [状态:Open] [关键词:markdown,标记语言,页内跳转,ht ...

  9. CSharpGL(18)分别处理glDrawArrays()和glDrawElements()两种方式下的拾取(ColorCodedPicking)

    CSharpGL(18)分别处理glDrawArrays()和glDrawElements()两种方式下的拾取(ColorCodedPicking) 我在(Modern OpenGL用Shader拾取 ...

随机推荐

  1. PowerDesigner导出表到HTML或word(实测有效)

    推荐生成HTML,因为看起来更加简洁 一.模版修改 在导出表时,powerdesigner默认为我们提供了很多的模版,在工具栏中选择[Report--->Report Template]即可看到 ...

  2. C语言 · 01背包

    最近老碰到DP问题,没整过,在网上有不少资料,转载此篇自:http://blog.csdn.net/libin56842/article/details/9338841 有N件物品和一个容量为V的背包 ...

  3. STM32f103的数电采集电路的TIMER定时器的使用与时序控制的程序

    STM32 的通用定时器是一个通过可编程预分频器(PSC)驱动的 16 位自动装载计数器(CNT)构成.STM32 的通用定时器可以被用于:测量输入信号的脉冲长度(输入捕获)或者产生输出波形(输出比较 ...

  4. PHP——大话PHP设计模式——链式操作

  5. if else练习 (解一元二次方程)

    public class cccc { /** * @param args */ public static void main(String[] args) { int a=10,b=11,c=12 ...

  6. ELK(Logstash+Elasticsearch+Kibana)的原理和详细搭建

    一. Elastic Stack Elastic Stack是ELK的官方称呼,网址:https://www.elastic.co/cn/products ,其作用是“构建在开源基础之上, Elast ...

  7. hbase 学习(十四)Facebook针对hbase的优化方案分析

    使用hbase的目的是为了海量数据的随机读写,但是在实际使用中却发现针对随机读的优化和gc是一个很大的问题,而且hbase的数据是存储在Hdfs,而Hdfs是面向流失数据访问进行设计的,就难免带来效率 ...

  8. strtok的基本使用方法

    理论知识自己能够百度这里直接上代码 代码的内容是 HDU(杭电)-1106-排序 排序 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 655 ...

  9. android开发(43) 动画演示,会跑的小人,从屏幕左侧跑到右侧

    想做一个动画,一个会跑的小人,从屏幕右侧跑道右侧,于是做了个尝试,上图: 要完成这样需要三步: 1. 做一个 帧动画 (frame animation),由多张图片组成,组成小人连续跑动的样子. 2. ...

  10. lr11.0负载测试 real-world schedule 与basic schedule的区别是什么

    real-world schedule 是真实场景模式  可以通过增加ACTION来增加多个用户 basic schedule 是我们以前用的 经典模式  只能设置一次负载的上升和下降