Marked+highlight实现markdown代码块复制按钮粘性滚动代码
代码语言:html
所属分类:加载滚动
代码描述:Marked+highlight实现markdown代码块复制按钮粘性滚动代码
代码标签: Marked highlight markdown 代码块 复制 按钮 粘性 滚动 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Marked.js - 代码块右上角粘性复制按钮</title>
<!-- Marked.js -->
<script src="//repo.bfw.wiki/bfwrepo/js/marked.min.js"></script>
<!-- highlight.js -->
<script src="//repo.bfw.wiki/bfwrepo/js/highlight.11.7.0.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/highlight.atom-one-dark.css">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
color: #333;
background: #f4f4f4;
margin: 0;
padding: 20px;
}
#content {
max-width: 900px;
margin: 0 auto;
background: #fff;
padding: 20px 40px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,.1);
}
h1, h2 {
border-bottom: 1px solid #eaecef;
padding-bottom: .3em;
}
/* 代码块样式 */
pre {
position: relative;
background: #282c34;
pa.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0