zoukankan      html  css  js  c++  java
  • MarkDown技巧:两种方式实现页内跳转

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

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


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

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




    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!

  • 相关阅读:
    [AU3]技巧
    [AU3]Windows 10 Update message DETELEDER Win10更新通知删除助手
    vue多选框选择后显示选中的内容
    计算object的长度
    关于苹果手机点击事件无效的解决办法
    vue中将汉字按照首字母排序,也适用于其他地方,但不适用多音字
    关于json数据格式错误
    Java下使用Swing来进行图形界面开发
    数字与静态
    Java中的内存机制及管理
  • 原文地址:https://www.cnblogs.com/JohnTsai/p/4027229.html
Copyright © 2011-2022 走看看