Javascript实现的CSS代码高亮显示-Java开发

下面详细讲解“Javascript实现的CSS代码高亮显示”的完整攻略。

下面详细讲解“Javascript实现的CSS代码高亮显示”的完整攻略。

1. 如何实现代码高亮显示

第一步：在HTML中引入CSS样式表和Javascript文件

<!DOCTYPE html>
<html>
  <head>
    <title>代码高亮实现</title>
    <link rel="stylesheet" href="code-highlight.css">
    <script src="code-highlight.js"></script>
  </head>
  <body>
    <pre><code>
      /* 这是要高亮的CSS代码 */
      body {
        background-color: #f7f7f7;
        font-size: 14px;
      }
    </code></pre>
  </body>
</html>

第二步：创建Javascript文件（例如code-highlight.js）实现代码高亮的核心功能：

window.addEventListener("load", function(){
  // 获取所有<pre><code>元素
  var codeBlocks = document.querySelectorAll("pre code");

  for(var i = 0, len = codeBlocks.length; i < len; i++){
    var code = codeBlocks[i];
    // 将代码块中的HTML转义
    var text = code.innerHTML.replace(/</g, "&lt;").replace(/>/g, "&gt;");
    // 替换代码块中的CSS样式
    text = text.replace(/\b(.*?)\b/g, '<span class="code-$1">$1</span>');
    code.innerHTML = text;
  }
});

第三步：创建CSS样式表（例如code-highlight.css）定义代码高亮的样式：

pre {
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
}

code {
  font-family: Consolas, "Courier New", monospace;
  font-size: 14px;
  color: #333;
}

span.code-selector {
  color: blue;
}

span.code-property {
  color: red;
}

span.code-value {
  color: #08f;
}

最后，我们需要将以上三个文件放到同一个目录下，并通过浏览器打开HTML文件，即可在页面上看到高亮显示的CSS代码。

2. 示例说明

示例一

CSS样式：

.alert {
  padding: 10px;
  background-color: #f00;
  color: #fff;
}

.btn {
  padding: 5px 10px;
  border-radius: 3px;
  background-color: #333;
  color: #fff;
}

高亮结果：

<pre><code>
  <span class="code-selector">.alert</span> {
    <span class="code-property">padding:</span> 10px;
    <span class="code-property">background-color:</span> #f00;
    <span class="code-property">color:</span> #fff;
  }

  <span class="code-selector">.btn</span> {
    <span class="code-property">padding:</span> 5px 10px;
    <span class="code-property">border-radius:</span> 3px;
    <span class="code-property">background-color:</span> #333;
    <span class="code-property">color:</span> #fff;
  }
</code></pre>

示例二

CSS样式：

ul li {
  list-style: none;
  padding: 0.5em;
  border-bottom: 1px solid #ccc;
}

ul li a {
  color: #08f;
  text-decoration: none;
}

ul li a:hover {
  text-decoration: underline;
}

高亮结果：

<pre><code>
  <span class="code-selector">ul li</span> {
    <span class="code-property">list-style:</span> none;
    <span class="code-property">padding:</span> 0.5em;
    <span class="code-property">border-bottom:</span> 1px solid #ccc;
  }

  <span class="code-selector">ul li a</span> {
    <span class="code-property">color:</span> #08f;
    <span class="code-property">text-decoration:</span> none;
  }

  <span class="code-selector">ul li a:hover</span> {
    <span class="code-property">text-decoration:</span> underline;
  }
</code></pre>

以上就是“Javascript实现的CSS代码高亮显示”的完整攻略了。

1. 如何实现代码高亮显示

2. 示例说明

示例一

示例二

基础教程推荐