W3.CSS - Màu mã

W3.CSS cung cấp hỗ trợ tuyệt vời cho việc tô sáng cú pháp của các ngôn ngữ sau:

HTML - Sử dụng các lớp w3-code htmlHigh trên vùng chứa có Mã HTML.
CSS - Sử dụng các lớp w3-code cssHigh trên vùng chứa có Mã CSS.
JS - Sử dụng các lớp w3-code jsHigh trên vùng chứa có Mã CSS.

Bạn phải bao gồm tập lệnh sau để có một liên kết đến tệp js để có hỗ trợ tô sáng cú pháp -

<script src = "https://www.w3schools.com/lib/w3codecolors.js"></script>

w3css_color_coding.htm

<html>
   <head>
      <title>The W3.CSS Syntax Highlighter</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h2>HTML Syntax Highlighted</h2>
      </header>
      <div class = "w3-code htmlHigh">
         <html>
            <head>
               <title>The W3.CSS Example</title>
               <meta name="viewport" content="width=device-width, initial-scale=1">
               <link rel="stylesheet" href="css/w3.css">
            </head>
            
            <body>
               <header class="w3-container w3-teal">
                  <h1>Hello World!</h1>
               </header>
            </body>
         </html>
      </div>
      
      <header class="w3-container w3-teal">
         <h2>CSS Syntax Highlighted</h2>
      </header>
      
      <div class = "w3-code cssHigh">
         .bold {
            font-weight:bold;
         }
         #boldLabel {
            font-weight:bold;
         }
         table, th, td {
            font-family:sans;
         }
      </div>
      
      <header class = "w3-container w3-teal">
         <h2>JS Syntax Highlighted</h2>
      </header>
      
      <div class = "w3-code cssHigh">
         <script type="text/javascript">
            function(message){
            }
            var message = "Hello, World!";
            alert(message);
         </script>
      </div>
      <script src="https://www.w3schools.com/lib/w3codecolors.js"></script>
   </body>
</html>

Kết quả

Xác minh kết quả.