前端代码高亮探索

最新推荐文章于 2024-07-21 23:05:49 发布

年轻的代码师傅

最新推荐文章于 2024-07-21 23:05:49 发布

阅读量1k

点赞数 3

分类专栏：前端文章标签： html5 javascript

本文链接：https://blog.csdn.net/qq_43563403/article/details/124213494

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文档介绍了一个简单的HTML页面代码高亮显示的实现方法，通过JavaScript获取输入代码并动态添加CSS样式，将关键字和注释分别标为fuchsia和gray。示例代码中使用jQuery处理用户输入的Dockerfile，并实时更新预览。

摘要由CSDN通过智能技术生成

前言

本人前端知识薄弱，以下为个人乱写的代码，如有错误，请不要告诉我。仅作为抛砖引玉的一个例子。

本案例探讨的是将代码在html页面上进行高亮显示，将关键字和注释进行高亮显示，比如注释行标记成gray，关键字标成fuchsia。

原理

其实前端要显示更多的样式，无非是加了style修饰，比如加上color: red，文本就会有红色的效果，那么自己实现代码高亮时也是一样的道理，首先获取输入的代码，然后在关键字的前后加入html标签，并嵌入样式。

代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testing...</title>
    <script type="text/javascript" src="jquery-1.12.4.js"></script>
</head>
<body>

    <label for="input_code">input your code</label> <br />
    <textarea name="input_code" id="input_code" cols="50" rows="20"># syntax=docker/dockerfile:1
FROM python:3.7-alpine
WORKDIR /code
ENV FLASK_APP=app.py
ENV FLASK_RUN_HOST=0.0.0.0
RUN apk add --no-cache gcc musl-dev linux-headers
COPY requirements.txt requirements.txt
RUN pip install -r requirements.txt
EXPOSE 5000
COPY . .
CMD ["flask", "run"]</textarea>

    <div id="show"></div>

    <script type="text/javascript">
        let keywords = ['FROM', 'WORKDIR', 'ENV', 'RUN', 'COPY', 'EXPOSE', 'CMD']
        function render(input) {
            let lines = input.split("\n");
            let result = '';
            for (let i = 0; i < lines.length; i++) {
                let line = lines[i].trim();  // 去掉前后空格
                let words = line.split(RegExp('[ ]+'));
                if (words[0] === '#') {
                    // 注释
                    let prefix = '<span style="color: gray">';
                    let suffix = '</span>';
                    result += (prefix + line + suffix);
                    result += '<br/>'
                    continue;
                } else {
                    // 非注释，将关键字标绿
                    for (let j = 0; j < words.length; j++) {
                        let word = words[j];
                        if (keywords.indexOf(word) > -1) {
                            let prefix = '<span style="color: fuchsia">'
                            let suffix = '</span>'
                            result += (prefix + word + suffix);
                        } else {
                            result += word;
                        }
                        result += ' ';
                    }
                }
                result += '<br/>'
            }
            return result;
        }

        $("#input_code").on('input propertychange', function () {
            let val = $(this).val();
            $("#show")[0].innerHTML = render(val);
        });
    </script>
</body>
</html>