案例：同时支持多种代码类型的高亮

在线案例源码页面：可以查看、编辑、执行、下载、复制

<pre><code class="language-javascript">
    // 这里是要高亮显示的代码
    function helloWorld() {
        console.log('Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!');
    }
    helloWorld();
  </code></pre>
  <pre><code class="language-javascript line-numbers">
    // 这里是要高亮显示的代码
    function helloWorld() {
        console.log('Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!');
    }
    helloWorld();
  </code></pre>


  <pre><code class="language-css">
    .aaa{  color:red;  }
  </code></pre>
  

  <pre><code class="language-html">
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sample HTML</title>
    </head>
    <body>
        <h1>Hello, World!</h1>
        <p>This is a sample HTML code block highlighted by Prism.js.</p>

        <div>
          xxxx
          <div>yyyy</div>
        </div>

        <scritp>
          // 这里是要高亮显示的代码
          function helloWorld() {
              console.log('Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!');
          }
          helloWorld();
        </scritp>

        <style>
          .aaa{  color:red;  }
        </style>

    </body>
    </html>
  </code></pre>


  <pre><code class="language-php">
    echo "Hello, World!";
  </code></pre>

上一条下一条

原文链接：http://jc.bian-jie.cn/search/JC_prism/1/9976.html

点击加入QQ交流群：{{qqQNum}}