支持IE和firefox的js代码美化加亮源码

首先，我们需要了解什么是代码美化加亮。代码美化加亮是通过对代码进行格式化和着色，使代码看起来更加美观、易读和可维护的技术。在项目开发中，我们常常需要对JS代码进行美化加亮，以便于代码的审查、调试和维护。

操作步骤：

1.选择一个JS代码美化工具，并下载相关工具。本例中我们选择支持IE和Firefox的CodeMirror代码编辑器。
2.引入jQuery和CodeMirror的CSS和JS文件。

<link href="path/to/codemirror.css" rel="stylesheet" />
<link href="path/to/codemirror-theme.css" rel="stylesheet" />
<script src="path/to/jquery.min.js"></script>
<script src="path/to/codemirror.min.js"></script>

3.将JS代码嵌入到HTML页面，并为这些代码的相关标签添加id属性。例如：

<pre><code id="js-code">
  var num1 = 10;
  var num2 = 20;
  var sum = num1 + num2;
  console.log(sum);
</code></pre>

4.使用CodeMirror代码编辑器初始化代码。具体代码如下：

<script>
  $(document).ready(function(){
    var editor = CodeMirror.fromTextArea(document.getElementById("js-code"), {
        mode: "javascript",
        theme: "dawn",
        lineNumbers: true,
        smartIndent: true
    });
  });
</script>

5.点击页面的 “运行” 按钮，执行JS代码，并在浏览器控制台输出计算结果。具体代码如下：

$("#run-btn").click(function(){
  var code = editor.getValue();
  eval(code);
});

示例一:

假设我们有一个计算两个数之和的JS函数：

function sum(num1, num2){
  var result = num1 + num2;
  return result;
}

我们需要通过代码美化加亮技术，使其看起来更加易读和美观。在页面中添加以下代码片段：

<pre><code id="js-code">
  function sum(num1, num2){
    var result = num1 + num2;
    return result;
  }
</code></pre>
<button id="run-btn">运行</button>

然后按照前面所述的步骤初始化CodeMirror，并执行并输出函数返回值：

<script>
$(document).ready(function(){
  var editor = CodeMirror.fromTextArea(document.getElementById("js-code"), {
    mode: "javascript",
    theme: "dawn",
    lineNumbers: true,
    smartIndent: true 
  });

  $("#run-btn").click(function(){
    var code = editor.getValue();
    eval(code);
    var result = sum(10, 20);
    console.log(result);
  });
});
</script>

点击 "运行" 按钮，即可在控制台看到结果为 "30" 的记录。

示例二：

我们需要将以下的JS代码进行美化加亮：

var btn = document.getElementById("btn");
btn.addEventListener("click", function(){
  console.log("Hello World!");
});

在页面中添加以下代码片段：

<pre><code id="js-code">
  var btn = document.getElementById("btn");
  btn.addEventListener("click", function(){
    console.log("Hello World!");
  });
</code></pre>
<button id="run-btn">运行</button>

然后按照前面所述的步骤初始化CodeMirror，并执行代码：

<script>
$(document).ready(function(){
  var editor = CodeMirror.fromTextArea(document.getElementById("js-code"), {
    mode: "javascript",
    theme: "dawn",
    lineNumbers: true,
    smartIndent: true 
  });

  $("#run-btn").click(function(){
    var code = editor.getValue();
    eval(code);
  });
});
</script>

点击 "运行" 按钮，即可在控制台看到输出记录 "Hello World!"。

通过以上示例，我们可以看到CodeMirror编辑器的美化加亮效果，并且在不同的JS代码运行环境中展现了非常好的兼容性。