MarkDown页面添加锚点,跳转到本页指定位置

已于 2023-02-27 15:23:39 修改
阅读量3.1w 收藏 79
点赞数 69
分类专栏： 工具 文章标签： csdn markdown
于 2019-06-12 21:37:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41910694/article/details/91629999
版权

MarkDown页面添加锚点,跳转到本页指定位置

目录

  1. MarkDown页面内跳转测试
  2. MarkDown页面内跳转语法

备注：好友收集了很多IT资源免费分享，有需要自取~

--------------------------------------------------------我是分割线---------------------------------------------------------
--------------------------------------------------------我是分割线---------------------------------------------------------
--------------------------------------------------------我是分割线---------------------------------------------------------
--------------------------------------------------------我是分割线---------------------------------------------------------
--------------------------------------------------------我是分割线---------------------------------------------------------
--------------------------------------------------------我是分割线---------------------------------------------------------
--------------------------------------------------------我是分割线---------------------------------------------------------
--------------------------------------------------------我是分割线---------------------------------------------------------
--------------------------------------------------------我是分割线---------------------------------------------------------
--------------------------------------------------------我是分割线---------------------------------------------------------
--------------------------------------------------------我是分割线---------------------------------------------------------
--------------------------------------------------------我是分割线---------------------------------------------------------
--------------------------------------------------------我是分割线---------------------------------------------------------
--------------------------------------------------------我是分割线---------------------------------------------------------
--------------------------------------------------------我是分割线---------------------------------------------------------

MarkDown页面内跳转测试

测试成功

MarkDown页面内跳转语法

  1. 实际语法比较简单，在需要跳转的位置添加锚点，语法如下：
<span id="jump">跳转到的地方</span>
  1. 在需要点击跳转的位置，使用上面的id，格式类似超链接的形式：
[点击跳转](#jump)
  1. 如目录语法为：
[MarkDown页面内跳转测试](#jump)
  1. 下面实际目录语法为：
<span id="jump">MarkDown页面内跳转测试</span>

这样就实现了上述功能。

如果还是不清楚的话直接复制下面代码到你的文章，就能看懂了。

# 标题

----
## 目录
1. [目录1](#jump1)
2. [目录2](#jump2)

---
### <span id="jump1">1. 目录1</span>
---
### <span id="jump2">2. 目录2</span>
Lumos`
关注
  • 69
    点赞
  • 踩
  • 79
    收藏
    觉得还不错? 一键收藏
  • 16
    评论
专栏目录
Markdown目录树、锚（anchor）和页内跳转
七宗劫的专栏
01-04 8万+
在使用Markdown写文档时，如果文档内容很多，我们很可能需要给文档生成目录树和使用页内跳转。本文提供了实现这些功能的方法，并且已经在有道云笔记中测试通过。
Markdown 实现页内跳转
一条菜鸟鱼的博客
03-14 1万+
Markdwon 实现页内跳转
Markdown生成目录及页内跳转
最新发布
u014020707的博客
06-20 165
一、自动生成目录。
三步图解！Markdown锚点在CSDN平台里如何使用跳转 只要三步！
暂时还没想好博客简介
02-06 764
三步图解！Markdown锚点在CSDN平台里如何使用跳转 只要三步！ 在CSDN平台使用Markdown写博客的时候，如何使用锚点功能？ CSDN 的 Markdown 编辑器锚点使用？ CSDN - Markdown（页面内如何使用锚点跳转）？
Vue项目引入Markdown文档、自定义锚点跳转和图片加载问题解决
桉屿念汐
05-21 1168
Vue项目引入Markdown文档，主要涉及到在Vue应用中使用Markdown语言来编写和展示内容。像我们在写用户操作手册或者项目changeLog时，可以直接写成Markdown形式，然后引入到页面中，方便用户查看。
markdown实现锚点跳转
zhangxiaohe1996的博客
01-18 1136
实现方法 markdown实现锚点跳转方式与html一致，故使用 a 标完成锚点跳转即可 跳转 代码 <a href='#test_redirect'>跳转</a> 解释 为了看到明显效果，我在文档中添加些无用的内容，以便进行测试 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 定位到此处 <a name='test_redirect' >定位到此处</a> ...
Markdown 页面内锚点跳转，跳转到指定位置
你当像鸟飞往你的山~~
11-14 8229
作者：LoveEmperor-王子様 Markdown 页面内锚点跳转，跳转到指定位置 目录添加[目录](#id)，id目标地点为锚点： 为了测试效果，可以在something处加上大量内容已达到上下页效果，再通过锚点跳转到目标 ...
vue添加锚点,实现滚动页面时锚点添加相应的class操作
10-14
在Vue中实现页面滚动时锚点添加相应class的操作，通常是为了增强用户体验，使得用户能够清晰地看到当前浏览的位置。以下将详细讲解实现这一功能的步骤和相关知识点。 首先，我们需要在HTML模板中设置锚点。在提供的...
ma:Markdown 锚点
06-28
如果您在未指定文件的情况下运行 ma，它将自动尝试查找具有.md或.markdown文件扩展名的文件。自动内容如果内容为空，它会自动放置标题。 当您的文档的一个部分有一个子部分时，它会自动给它一个较小的字体大
java将markdown文档转换成html，生成左侧目录
11-04
本项目的目标是创建一个工具，它能够将Markdown文档转换为HTML格式，并且生成带有左侧目录的页面布局。这样的设计非常适合阅读长篇的技术文档或者教程，因为用户可以通过左侧目录快速跳转至不同章节，提高阅读和导航...
markdown-toc:Markdown TOC（目录）生成器
03-18
它会根据标题的级别（一级标题至六级标题）来决定目录的层级，并为每个标题生成一个链接，点击这个链接可以直接跳转到文档中相应的位置。 使用Markdown TOC时，用户通常只需要在Markdown文档开头插入一个特殊的命令...
joejordan-r.github.io：我的页面
02-20
5. 链接与锚点：`<a href="">`用于创建链接，`<a name="">`或`<a id="">`创建锚点，实现页面内部跳转。 此外，开发者可能还利用了CSS来实现页面样式，如颜色、字体、布局、动画等。JavaScript可能用于实现交互效果...
Markdown中跳转，锚点操作浅析
jerrygaoling的博客
11-27 1628
页面内跳转操作 HTML标签跳转方式 这种方式的跳转主要是采用HTML中herf标签来指定跳转位置。 在本页面跳转中，链接指向的是其他标签中的name与id属性。 声明跳转目标位置属性，以#开头，标题题号如果包含.、下划线直接忽略掉，标题文本中如果有空格，使用-下滑横杠符号替代，标题文本中的大写字母转换成小写。 假定要跳转到目标位置1和目标位置2，如下定义其属性。 <span id="jum...
IDEA设置自定义代码模板
热门推荐
努力努力再努力L
05-16 1万+
IDEA设置自定义快捷键 1. 进入IDEA界面，File–>Settings 2. 在搜索框输入live，选择output，然后点击+，选第一个选项即可。即图2. ` 3. 左下角会出现Define，点击选择Java 4. 输入你想设置的快捷键即可 ...
mac安装QT及QT基本使用
努力努力再努力L
03-21 8937
mac安装QT及QT基本使用 目录 QT安装 QT基本使用 1. QT安装 根据需求下载对应QT版本，地址：http://mirrors.ustc.edu.cn/qtproject/archive/qt/ 打开下载好的安装进行安装
IDEA修改及设置快捷键
努力努力再努力L
11-26 5245
IDEA修改及设置快捷键 目录 修改快捷键习惯 设置快捷键 1. 修改快捷键习惯 1. 点击 File -> Settings… 2. 选择keymap选项卡，在右侧的keymap下拉框中选择合适自己的快捷键 2. 设置快捷键 1. 同一进行如下操作 2. 设置自己的快捷键 ...
IDEA手动导入jar包
努力努力再努力L
11-26 2190
IDEA手动导入jar包 前言：IDEA 中 maven 不能导入指定版本的 jar 包，检查了 pom 依赖都是没有问题的，其他能导入，就这个不行。虽然没有影响，但强迫症看着小红点很难受。试了一下手动导入指定版本 jar 包，发现可解决。 操作如下： 一：点击 File -> Project Structure（快捷键 Ctrl + Alt + Shift + s），点击Projec...
Navicat Premium 12安装及常用快捷键
努力努力再努力L
12-02 1346
Navicat Premium 12安装及常用快捷键 目录 Navicat Premium 12安装 Navicat Premium 12常用快捷键 1. Navicat Premium 12安装 下载Navicat Premium 12免安装注册版 链接: https://pan.baidu.com/s/1BbwYWjInLx-uAVwI6Faicw 提取码: w33t 解压压缩...
markdown-navbar锚点不生效
05-30
如果在使用 `markdown-navbar` 组件时，锚点链接没有生效，可能是因为你没有为 markdown 中的标题添加 `id` 属性。`markdown-navbar` 默认使用标题的 `id` 属性来生成锚点链接，如果标题没有 `id` 属性，那么锚点链接就无法跳转到正确的位置。 要解决这个问题，一种简单的方法是使用 `remark` 和 `remark-slug` 插件为 markdown 中的标题添加自定义的 `slug`，然后在 `markdown-navbar` 中使用 `slug` 来覆盖默认的 `id` 属性。 以下是一个示例代码： ```jsx import React from 'react'; import ReactMarkdown from 'react-markdown'; import Navbar from 'markdown-navbar'; import 'markdown-navbar/dist/navbar.css'; import remarkSlug from 'remark-slug'; import unified from 'unified'; const MyMarkdown = ({ source }) => { const processor = unified().use(remarkSlug); const markdownAST = processor.parse(source); const headings = []; processor.runSync(markdownAST).children.forEach((node) => { if (node.type === 'heading') { // 获取自定义的 slug const slug = node.data?.hProperties?.slug; // 将 slug 赋值给 id 属性 node.data = { hProperties: { id: slug, }, }; headings.push({ level: node.depth, title: node.children[0].value, slug, }); } }); return ( <> <Navbar headings={headings} /> <ReactMarkdown astPlugins={[remarkSlug]}>{source}</ReactMarkdown> </> ); }; export default MyMarkdown; ``` 在这个示例中，我们使用 `unified` 和 `remark-slug` 插件为 markdown 中的标题添加了自定义的 `slug`，然后在 `MyMarkdown` 组件中将 `slug` 赋值给了标题节点的 `id` 属性。这样就可以保证锚点链接能够正确跳转到相应的位置。 需要注意的是，`data-id` 属性并非标准的 HTML 属性，如果需要使用这个属性来进行一些操作，可能需要自己编写相应的 JavaScript 代码来实现。
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值