html网页代码块高亮加行号

最新推荐文章于 2024-05-05 06:33:55 发布

荷塘月色2

最新推荐文章于 2024-05-05 06:33:55 发布

阅读量542

点赞数

分类专栏：网页文章标签： html 前端开发语言人工智能

本文链接：https://blog.csdn.net/alicema1111/article/details/133945472

版权

网页专栏收录该内容

9 篇文章 0 订阅

订阅专栏

程序示例精选
html网页代码块高亮加行号
如需安装运行环境或远程调试，见文章底部个人QQ名片，由专业技术人员远程协助！

前言

这篇博客针对《html网页代码块高亮加行号》编写代码，代码整洁，规则，易读。学习与应用推荐首选。

运行结果

文章目录

一、所需工具软件
二、使用步骤
1. 主要代码
2. 运行结果
三、在线协助

一、所需工具软件

1. Html网页
2. 高亮行号插件

二、使用步骤

代码如下（示例）：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入prism.css -->
</head>
<body>
    <div style="width:800px;margin: 10px auto;">
        <pre class="line-numbers" style="padding-left: 0px;">
            <code class="language-java">
                package com.zzhua;

                import org.mybatis.spring.annotation.MapperScan;
                import org.springframework.boot.SpringApplication;
                import org.springframework.boot.autoconfigure.SpringBootApplication;

                @SpringBootApplication
                @MapperScan("com.zzhua.mapper")
                public class VueApp {
                    public static void main(String[] args) {
                        SpringApplication.run(VueApp.class);
                    }
                }
            </code>
        </pre>
    </div>
</body>

<!-- 引入jquery操作dom -->
<script src="jquery/jquery.js"></script>

<script>
    $('pre').each(function () {
        $(this).addClass('line-numbers');
    })
</script>
<script src="./prism/prism.js"></script>

</html>