<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.prettyprint {
margin: 0 0 24px;
padding: 8px 16px 6px 26px;
background-color: #000000;
border: none;
position: relative;
overflow-y: hidden;
overflow-x: auto;
}
.language-javascript {
display: block;
font-size: 14px;
line-height: 22px;
overflow-x: auto;
padding: 0 !important;
color: #fff;
white-space: pre;
word-wrap: normal;
background-color: #000000;
border-radius: 4px;
}
</style>
</head>
<body>
<div id="codeBox">
</div>
</body>
<script>
var str = `
22222222222
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
上的多多多
</div>
</body>
</html>`
// 封装
function codePre(str, id) {
var el = document.getElementById(id)
el.innerHTML = '<div class="prettyprint"><div class="language-javascript"></div></div>'
var wrap = document.getElementById(id).firstChild.firstChild
wrap.innerText = str
}
// 调用 参数 内容 显示的 块id
codePre(str, 'codeBox')
</script>
</html>