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
    评论
专栏目录
vue添加锚点,实现滚动页面时锚点添加相应的class操作
10-14
在Vue中实现页面滚动时锚点添加相应class的操作，通常是为了增强用户体验，使得用户能够清晰地看到当前浏览的位置。以下将详细讲解实现这一功能的步骤和相关知识点。 首先，我们需要在HTML模板中设置锚点。在提供的...
Markdown目录树、锚（anchor）和页内跳转
热门推荐
七宗劫的专栏
01-04 8万+
在使用Markdown写文档时，如果文档内容很多，我们很可能需要给文档生成目录树和使用页内跳转。本文提供了实现这些功能的方法，并且已经在有道云笔记中测试通过。
三步图解！Markdown锚点在CSDN平台里如何使用跳转 只要三步！
暂时还没想好博客简介
02-06 756
三步图解！Markdown锚点在CSDN平台里如何使用跳转 只要三步！ 在CSDN平台使用Markdown写博客的时候，如何使用锚点功能？ CSDN 的 Markdown 编辑器锚点使用？ CSDN - Markdown（页面内如何使用锚点跳转）？
Vue项目引入Markdown文档、自定义锚点跳转和图片加载问题解决
最新发布
桉屿念汐
05-21 1036
Vue项目引入Markdown文档，主要涉及到在Vue应用中使用Markdown语言来编写和展示内容。像我们在写用户操作手册或者项目changeLog时，可以直接写成Markdown形式，然后引入到页面中，方便用户查看。
Markdown 实现页内跳转
一条菜鸟鱼的博客
03-14 1万+
Markdwon 实现页内跳转
markdown实现锚点跳转
zhangxiaohe1996的博客
01-18 1134
实现方法 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> ...
CSDN之写文章：在Markdown中点击关键语句跳转指定位置（两种方法）
u014282578的博客
11-10 4842
新手在CSDN写文章，如果写了关键语句，想实现类似html的锚点功能，即点击关键语句跳转到指定位置，该如何编写样式呢？其实有两种方法，笔者就来说说是哪两种方法。
Markdown 跳转到指定位置
我为人人，人人为我
06-05 1780
【代码】Markdown 跳转到指定位置。
markdown 锚点_如何实现MARKDOWN网页内跳转？
weixin_39692557的博客
11-29 592
■ 前言在以下几种情况下，需要能够在网页内快速定位跳转：如果网页实在是太长了，后面和前面的叙述需要相互引用，实现网页内跳转可以便于阅读和查看。如果通过链接跳转到另外的长网页，也希望能够快速定位到相关内容，则需要提供在链接网页中跳转的方式。JohnTsai在他的博文 MarkDown技巧：实现网页内跳转[1] 中给出了两种使用MARKDOWN编辑器来获得网页内的跳转方式。下面基于他介绍的方法，来给出...
Markdown (CSDN) MD编辑器（一）- 实现页内跳转
wkd_007的博客
04-14 9290
介绍了在 markdown 编辑器实现“页内跳转”的功能，阐述了锚点是什么，怎样创建锚点，怎样引用锚点，最后给出 markdown 格式文章，并讲解了怎么实现跳转
markdown中常见跳转技巧
weixin_44814196的博客
12-29 3561
参考链接” 是一种 Markdown 中用于提供链接定义的方式，其主要目的是使文本更加清晰和易读，减少文本中链接的干扰。通常而言, 参考链接主要使用于较为复杂的文档, 简单文档中使用超链接即可。可以使用相对路径或者绝对路径。使用 HTML的a标签。
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 1623
页面内跳转操作 HTML标签跳转方式 这种方式的跳转主要是采用HTML中herf标签来指定跳转位置。 在本页面跳转中，链接指向的是其他标签中的name与id属性。 声明跳转目标位置属性，以#开头，标题题号如果包含.、下划线直接忽略掉，标题文本中如果有空格，使用-下滑横杠符号替代，标题文本中的大写字母转换成小写。 假定要跳转到目标位置1和目标位置2，如下定义其属性。 <span id="jum...
【Markdown实用教程1】Markdown文档内部跳转
wang2leee的博客
12-25 1729
【Markdown实用教程1】Markdown文档内部任意跳转
Markdown设置锚点跳转
RR_chen的博客
07-07 341
跳至1 源代码： 调至2 1 源代码： 2
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、付费专栏及课程。

余额充值