【优快云 - Markdown】锚点（页面内跳转）

原创 已于 2022-12-04 14:04:14 修改 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#编辑器

于 2022-10-29 09:22:28 首次发布
博客介绍了编辑器在长文章内的快速跳转功能，包括关联知识跳转、跳转到最新更新位置、文章顶部或底部等。还列举了两种用法，如设置跳转位置，以及不同元素间的点击跳转示例。

长文章内的快速跳转，如：关联知识跳转，跳转最新更新位置，跳转到文章顶部/底部

用法一

点击后跳转👇，设置为：[点击后跳转](#top) 或 <a href="#top">点击后跳转</a>

跳转的位置⭐，设置为：<a id="top"></a>跳转的位置



用法二

A，[A](#A)，点击 >> C

B，<a id="B"></a>B

C，<a id="A" href="#B">C</a>，点击 >> B

Vue3 - 详细实现解析Markdown内容生成侧边栏Toc目录索引，识别文章内容根据大标题/小标题自动生成多级文章目录，点击目录导航时跳转到文章内容对应的锚点位置带过渡动画，滑过锚点时高亮对应标题
🏆 前端领域优质创作者
08-28 4279
vue3，nuxt3，Markdown，目录，文章目录锚点，滚动高亮导航文字，Vue3渲染markdown文件，并生成锚点目录树(toc)，根据页面滚动高亮显示目录的侧边栏，自动提取标题生成右侧目录，vue3markdown解析并生成目录，锚点定位，文章目录滚动跟随高亮，右边菜单点击目录滚动到对应标题，报错，渲染失败，文章内容，读取#标题符号，自动生成一个目录树，博客内容生成目录索引，资讯文章，滚动页面的时候文章目录跟着选中效果，侧边栏滚动跟随页面，右边目录固定,左边内容可以滚动并且与左边目录联动，实现监
Vue2 - 详细实现解析Markdown内容生成侧边栏Toc目录索引，识别文章内容根据大标题/小标题自动生成多级文章目录，点击目录导航时跳转到文章内容对应的锚点位置带过渡动画，滑过锚点时高亮对应标题
🏆 前端领域优质创作者
08-28 3407
vue2，nuxt2，Markdown，目录，文章目录锚点，滚动高亮导航文字，根据页面滚动高亮显示目录的侧边栏，自动提取标题生成右侧目录，vuemarkdown解析并生成目录，滚动页面的时候文章目录跟着选中效果，侧边栏滚动跟随页面，右边目录固定,左边内容可以滚动并且与左边目录联动，实现监听滚动，锚点定位，文章目录滚动跟随高亮，右边菜单点击目录滚动到对应标题，报错，渲染失败，文章内容，读取#标题符号，自动生成一个目录树，自动生成Toc目录，博客内容生成目录索引，资讯文章，生成锚点目录树TOC，详细示例代码教
【Markdown实用教程1】Markdown文档内部跳转
wang2leee的博客
12-25 2648
【Markdown实用教程1】Markdown文档内部任意跳转
ma:Markdown 锚点
06-28
嘛 使创建目录部分变得简单，其中包含指向文档内容中标题锚点的锚链接。 安装 npm install ma -g或克隆源。 用 Ma 假定您使用正确的缩进样式。 每个缩进级别没有制表符和两个或四个空格。 通过将目录放在以下两个注释之间来定义目录的位置： <!--- TABLE_OF_CONTENTS --> <!--- /TABLE_OF_CONTENTS --> 。 通过放置（在）以下两个注释来定义（放置位置）您的内容的位置： <!--- CONTENT --> <!--- /CONTENT --> 之后，从命令行运行ma myMarkdownFile.md 。 如果您在未指定文件的情况下运行 ma，它将自动尝试查找具有.md或.markdown文件扩展名的文件。 自动内容 如果内容为空，它会自动放置标题。 当您的文档的一个部分有一个子部分时，它会自动给它一个较小的字体大
md文件跳转方式有哪些
最新发布
u010632343的博客
09-30 781
在 Markdown（.md 文件）中，跳转功能主要通过实现，核心是利用的基础格式，根据跳转目标的不同（外部网页、同一文件内锚点、其他 .md 文件），衍生出多种具体方式。
Markdown (优快云) MD编辑器（一）- 实现页内跳转
wkd_007的博客
04-14 1万+
介绍了在 markdown 编辑器实现“页内跳转”的功能，阐述了锚点是什么，怎样创建锚点，怎样引用锚点，最后给出 markdown 格式文章，并讲解了怎么实现跳转
Markdown实现页内跳转
自己在学习过程中的总结
01-18 1309
Markdown实现页内跳转。在写博客时需要利用页内跳转使读者可以快速跳转到文章的某处，由于Markdown可以与HTML混编，所以可以使用 HTML 的语法来实现页内跳转。步骤如下：1.创建锚点，利用HTML的``标签的`id`属性创建锚点。 2.引用锚点，引用锚点本质上就是创建一个指向锚点的链接。
第一次在优快云（优快云-markdown）写博客你应该知道的事项
有片云
10-29 787
  在 优快云 混了好些年，常常找别人写的东西，但又时候别人写的东西很是杂乱或者不全，忽然兴起想写点东西。   没有写之前感觉应不难，但是第一次写还遇见一些问题，如分隔线、空格、空行、发布后的分类等。但是在网上找也是比较零散，所以在边写边学的基础上写了这篇文章，希望能帮助后来者，也能让自己有复学的机会，而不是花时间去找度娘。   1、先写 分类专栏   如果你是第一次写C...
Markdown中实现锚点跳转的两种方法及应用技巧
Markdown锚点机制是一种在Markdown文档中实现页面内跳转的重要技术手段，广泛应用于长篇文档、技术博客、项目说明（README）等场景中，能够显著提升文档的可读性与导航效率。尽管原生Markdown语法本身并不直接支持...
Markdown中实现页内跳转的完整方法与源码示例
其核心思想是：**利用HTML的锚点机制与Markdown语法相结合**，从而突破Markdown原生功能的限制，实现在优快云等支持混合HTML-Markdown渲染环境下的页内跳转功能。该方法不仅简单高效，而且具有良好的兼容性和实用性，...
MarkDown页面添加锚点,跳转到本页指定位置
热门推荐
努力努力再努力L
06-12 3万+
优快云目录页面内跳转 目录 MarkDown页面内跳转测试 MarkDown页面内跳转语法 --------------------------------------------------------我是分割线--------------------------------------------------------- ------------------------------...
三步图解！Markdown锚点在优快云平台里如何使用跳转 只要三步！
暂时还没想好博客简介
02-06 931
三步图解！Markdown锚点在优快云平台里如何使用跳转 只要三步！ 在优快云平台使用Markdown写博客的时候，如何使用锚点功能？ 优快云 的 Markdown 编辑器锚点使用？ 优快云 - Markdown（页面内如何使用锚点跳转）？
在Markdown文档中实现内部跳转
聂可以的博客
07-08 3276
在Markdown文档中实现内部跳转
markdown 锚点_如何实现MARKDOWN网页内跳转？
weixin_39692557的博客
11-29 778
■ 前言在以下几种情况下，需要能够在网页内快速定位跳转：如果网页实在是太长了，后面和前面的叙述需要相互引用，实现网页内跳转可以便于阅读和查看。如果通过链接跳转到另外的长网页，也希望能够快速定位到相关内容，则需要提供在链接网页中跳转的方式。JohnTsai在他的博文 MarkDown技巧：实现网页内跳转[1] 中给出了两种使用MARKDOWN编辑器来获得网页内的跳转方式。下面基于他介绍的方法，来给出...
Markdown 实现页内跳转
一条菜鸟鱼的博客
03-14 1万+
Markdwon 实现页内跳转
markdown实现锚点跳转
zhangxiaohe1996的博客
01-18 1252
实现方法 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语法实现页内跳转(csdn写博客利器)绝对通俗易懂 秒学会
weixin_62613321的博客
09-01 1751
markdown语法 typora页内跳转使用教程
Markdown设置锚点跳转
RR_chen的博客
07-07 515
跳至1 源代码： 调至2 1 源代码： 2
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值