marked+coderunner+highlight实现markdown文本代码高亮显示可显示运行结果代码
代码语言:html
所属分类:其他
代码描述:marked+coderunner+highlight实现markdown文本代码高亮显示可显示运行结果代码,通过coderunner.js插件,可实时在线运行47种编程语言并反馈运行结果进行预览,特别适合ai编程对话的代码预览功能artifact。
代码标签: marked coderunner highlight实现 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>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/coderunner.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;
}
.run-button {
position: absolute;
top: 0;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0