markdown、代码高亮、css动画、目录生成、返回顶部(平滑滚动)

最新推荐文章于 2025-01-11 21:05:58 发布

不积硅步

最新推荐文章于 2025-01-11 21:05:58 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：工具

本文链接：https://blog.csdn.net/qq_42977003/article/details/104679703

工具专栏收录该内容

15 篇文章

订阅专栏

本文介绍了使用Editor.md编辑器的markdown语法高亮方法，包括如何为特定代码块添加样式，利用animate.css实现动画效果，以及如何生成目录并集成到项目中。提供了详细的代码示例和相关资源链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Editor.md的markdown编辑器

在这里插入图片描述

markdown编辑器

参考博客： https://blog.csdn.net/qq_40205116/article/details/104525511
参考博客：https://www.cnblogs.com/liujiaxian/p/6336841.html

给部分代码加高亮

<pre ><code class="language-css">
/* 标题应该更贴紧内容，并与其他块区分，margin 值要相应做优化 */
h1,h2,h3,h4,h5,h6 {
    line-height:1;font-family:Arial,sans-serif;margin:1.4em 0 0.8em;
}
h1{font-size:1.8em;}
h2{font-size:1.6em;}
h3{font-size:1.4em;}
h4{font-size:1.2em;}
h5,h6{font-size:1em;}

/* 现代排版：保证块/段落之间的空白隔行 */
.typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr {
    margin:1em 0 0.6em;
}
</code></pre>

返回顶部

<script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
    //返回顶部
    $('#toTop-button').click(function () {
        $(window).scrollTo(0,500);
    });

目录生成

github： https://github.com/tscanlin/tocbot
参考网址：http://npm.taobao.org/package/tocbot