Учебники

W3.CSS — Кодовая раскраска

Ноябрь 23, 2018

W3.CSS обеспечивает отличную поддержку подсветки синтаксиса следующих языков —

  • HTML — используйте классы w3-кода htmlHigh на контейнере, имеющем HTML-код.

  • CSS — Используйте классы w3-code cssHigh на контейнере, имеющем CSS Code.

  • JS — использовать классы w3-кода jsHigh на контейнере, имеющем код CSS.

HTML — используйте классы w3-кода htmlHigh на контейнере, имеющем HTML-код.

CSS — Используйте классы w3-code cssHigh на контейнере, имеющем CSS Code.

JS — использовать классы w3-кода jsHigh на контейнере, имеющем код CSS.

Вы должны включить следующий скрипт, чтобы иметь ссылку на файл js, чтобы иметь поддержку подсветки синтаксиса — 

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

w3css_color_coding.htm

Live Demo 

<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>

Результат

Проверьте результат.

54
Share: