使用有序列表将html元素内容转带行号代码
html的有序列表自带序号，实现带行号的代码显示功能可以考虑用它。比如下面的svg，我们想在效果的后面马上显示带行号的代码，利用有序列表很容易实现，试看下面的效果和代码：
上述代码没有全新地写一遍，而是利用JS生成，就是下面的JS代码，放在</body>的前面就好。这个代码能够实现两种模式的带行号的HTML、CSS、JS等代码：第一种是上面的代码，在原始html元素之后追加一个显示代码的元素。如果代码带有script标签，则需要将script标签起始和收尾标签符的 < 和 > 分别转义为 < 和 >，其他的不用转义；第二种是下面的情形，在原元素之上改写代码令其显示带行号的代码，同样的，如果有script标签，也需要分别将script起始和收尾标签符进行转义：
<script>
let createCode = (ele,inner) => {
let strAr = (inner ? ele.innerHTML.trim() : ele.outerHTML).split('\n');
strAr.forEach((item,key) => {
item = item.replaceAll('<','<');
item = item.replaceAll('>','>');
item = item.replaceAll('\t',' ');
strAr[key] = '<li>' + item + '</li>';
});
let outstr = '<ol>' + strAr.join('\n') + '</ol>';
let cssCode = `margin: 10px 0; padding: 8px;font: normal 16px Consolas, courier, monospace;background: #f1f1f1;`;
if(inner == false) {
let papaNode = ele.parentNode;
let sonNode = document.createElement('div');
sonNode.style.cssText = cssCode;
sonNode.innerHTML = outstr;
papaNode.insertBefore(sonNode,ele.nextSibling);
}else{
ele.style.cssText += cssCode;
ele.innerHTML = '<ol>' + strAr.join('') + '</ol>';
}
};
</script>
调用方法：
let mysvg = document.getElementById('mysvg'),
jsBoxes = document.querySelectorAll('.jscode');
createCode(mysvg,false);
createCode(jsBoxes[0],true);
createCode(jsBoxes[1],true);
前一篇: svg之 animateMotion 路径动画（一）
下一篇: svg之 animateMotion 路径动画（二）
发表评论:
评论列表 [0条]
