Thursday, March 16, 2017

W3.CSS - Code Coloring

W3.CSS provides excellent support for syntax highlighting of the following languages:
  • HTML - Use classes w3-code htmlHigh on the container having HTML Code.
  • CSS - Use classes w3-code cssHigh on the container having CSS Code.
  • JS - Use classes w3-code jsHigh on the container having CSS Code.
You have to include the following script to have a link to the js file to have the syntax highlighting support:
<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>

Result

Verify the result.

HTML Syntax Highlighted

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

CSS Syntax Highlighted

.bold { font-weight:bold; } #boldLabel { font-weight:bold; } table, th, td { font-family:sans; }

JS Syntax Highlighted

<script type="text/javascript"> function(message){ } var message = "Hello, World!"; alert(message); </script>
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)