marked.js转换markdown文本高亮显示代码块添加头部和复制按钮效果代码
代码语言:html
所属分类:其他
代码描述:marked.js转换markdown文本高亮显示代码块添加头部和复制按钮效果代码
代码标签: marked.js 转换 markdown 文本 高亮 显示 代码块 添加 头部 复制 按钮
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/highlight.js"></script> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/highlight.9.9.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/marked.min.js"></script> <style> .code-header { position: absolute; top: 0; left:0; right: 0; width: 100%; color: #cdcdcd; height:20px; background : #6767; } .language-label { position: absolute; top: 0; left: 0; padding: 0.3em 0.6em; font-size: 0.8em; } .copy-button { position: absolute; top: 0; right: 0px; padding: 0.3em 0.6em; border: none; border-radius: 3px; cursor: pointer; font-size: 0.8em; } .code-content{ display: block; } #content pre{ position: relative; background: black; color: white; border-radius: 6px; padding: 1em; margin: 1em 0; } </style> </head> <body> <div id="content"></div> <script> // 自定义渲染器 const renderer = new marked.Renderer(); renderer.code = function(code, language) { const escapedCode = this.options.highlight(code, language); return ` .........完整代码请登录后点击上方下载按钮下载查看
网友评论0