highlight.js代码美化插件的使用

最快捷的方式：cdn直接引入

highlight官网： https://highlightjs.org

<!--引入常用代码-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<!--加载行号-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>

下面是一些改动，根据需求改。

	  <style>
		/*行号水平居中*/
        .hljs-ln-numbers {
            text-align: center;
            color: #ccc;
            border: 0;
        }
        /*附加额外代码样式*/
        .hljs-ln-code {
            padding-left: 10px;
            border: 0 solid #ccc;
        }
        /*附加额外代码样式*/
        .hljs{
            background-color: rgba(0,0,0,0);
            border: 0 solid #ccc;
        }
    </style>

*最后启动插件。

	<script>
		//启动插件
        hljs.highlightAll();
		//启动行号插件
        hljs.initLineNumbersOnLoad();
    </script>

×

*转载请注明出处：原文链接：https://cpp.vin/page/16.html