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!

时间: 2024-09-19 13:42:40

MarkDown技巧:两种方式实现页内跳转的相关文章

将html页改成jsp的两种方式_JSP编程

一般情况,将html页改成jsp有两种方法,第一种是直接修改html文件,另一种是新建jsp文件.下面具体说一下这两种方式. 假设我们要将testPage.html文件修改为testPage.jsp文件.原testPage.html文件内容为: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&qu

JavaScript创建闭包的两种方式的优劣与区别分析_javascript技巧

通常JavaScript创建闭包比较常用的有两种方式. 构造函数方式: new function() { var 变量... } 内联执行方式: (function() { var 变量... })(); 在JavaScript内部运行机制下他们有什么区别?用哪种方式创建比较好?它与其它方式创建的闭包相比有什么优势? 我是这样理解的: 区别: 第一个:子方法可以共享变量 第二个:内部子方法共享变量 比较: 我认为内联的比较好: 优势: 一般内联的创建是按需索要内存,因为只是局部执行的变量在内存里

ASP.NET Razor模板引擎中输出Html的两种方式_实用技巧

本文实例讲述了ASP.NET Razor模板引擎中输出Html的两种方式.分享给大家供大家参考,具体如下: Razor中所有的Html都会自动编码,这样就不需要我们手动去编码了(安全),但在需要输出Html时就是已经转义过的Html文本了,如下所示: @{ string thisTest = "<span style=\"color:#f00;\">qubernet</span>"; } @thisTest; 这样在页面输出的文本就是:<

request请求获取参数的实现方法(post和get两种方式)_javascript技巧

提交表单代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h1>测试请求参数</h1> <!-- 注意href和action都是写的完整的名称:项目名和资源路径名 --> <!-- 下面一句

如何用JavaScript动态呼叫函数(两种方式)_javascript技巧

近来的使用者,越来越强调 UI 介面的互动,渐渐原本对一条小龙来说只是配角的 JavaScript (以下简称 JS) 变成的主角,占了很大一块的用途. 像是最近很热门的 ASP.NET 的 MVC 里面就直接Include JQuery 可见一般. MVC 用了一阵子,一条小龙甚至感觉 MVC 中的 Controller 根本就是 JS 在控制的,这样怎么把 UI 工作独立,切给美工用,感觉也是蛮大的疑问. 看来后面的美工,只会绘图.拉画面是不行的,一定要会 JS.Flash 等等前端控制语言

javascript数组输出的两种方式_javascript技巧

本文实例讲述了javascript数组输出的两种方式.分享给大家供大家参考.具体如下: 遍历javascript数组,两种方式: 第一种: 复制代码 代码如下: <script language="javascript" type="text/javascript"> var str = "how are you today"; var arr = str.split(" "); for(var key in ar

php+mysqli数据库连接的两种方式_php技巧

本文实例讲述了php+mysqli数据库连接的两种方式.分享给大家供大家参考.具体如下: 这里讲述mysqli数据库连接两种方式比较,即面向对象与面向过程.代码如下: 第一种方式:面向对象的方式建立数据库连接 复制代码 代码如下: $mysqli = new MySQLi("localhost","root","1233456");//默认的 MySQL的类,其属性与方法见手册 if($mysqli->connect_error){//co

javascript面向对象之访问对象属性的两种方式分析_javascript技巧

本文实例分析了javascript面向对象之访问对象属性的两种方式.分享给大家供大家参考.具体如下: javascript面向对象的访问对象属性的两种方式.如下代码所示: 复制代码 代码如下: <script language="javascript" type="text/javascript"> function Person(){}; var p1 = new Person(); p1.name="王美人"; document.

判断JS对象是否拥有某种属性的两种方式_javascript技巧

两种方式,但稍有区别 1,in 运算符 复制代码 代码如下: var obj = {name:'jack'}; alert('name' in obj); // --> true alert('toString' in obj); // --> true 可看到无论是name,还是原形链上的toString,都能检测到返回true. 2,hasOwnProperty 方法 复制代码 代码如下: var obj = {name:'jack'}; obj.hasOwnProperty('name'