怎么实现博客文章的代码显示的功能

图片描述

我想实现这种显示代码的功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

<div class="test"></div>

<script type="text/javascript">

document.getElementsByClassName('test')[0].innerHTML = 'let test = arg => { ' +
  +'console.log(arg);'+
+'}'
+'test(\'我的\');'

</script>

</body>
</html>

图片描述

我打算往 innerHTML 赋值,但是发现这样赋值特别麻烦,如果代码过多,等号右边需要写特别多的代码

还有的问题就是换行

有没有做过这个功能的高手,指教下怎么实现这种功能

阅读 2.8k
3 个回答

简单的可以直接用<pre></pre>标签,可以保留代码格式

想高档一点的,需要代码高亮的就可以用一个代码高亮插件highlightjs

源码输出,用 pre 标签就行了。 如<pre>你的源码</pre>

应该先弄一个代码编辑器,就能导出dom格式的代码,然后渲染dom就行了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题