Google Choice: W3.CSS - Code Coloring

Welcome to GoogleDG – your one-stop destination for free learning resources, guides, and digital tools.

At GoogleDG, we believe that knowledge should be accessible to everyone. Our mission is to provide readers with valuable ebooks, tutorials, and tech-related content that makes learning easier, faster, and more enjoyable.

What We Offer:

📘 Free & Helpful Ebooks – covering education, technology, self-development, and more.
💻 Step-by-Step Tutorials – practical guides on digital tools, apps, and software.
🌐 Tech Updates & Tips – simplified information to keep you informed in the fast-changing digital world.
🎯 Learning Support – resources designed to support students, professionals, and lifelong learners.
✔ Latest world News

Our Vision

To create a digital knowledge hub where anyone, from beginners to advanced learners, can find trustworthy resources and grow their skills.

Why Choose Us?

✔ Simple explanations of complex topics
✔ 100% free access to resources
✔ Regularly updated content
✔ A community that values knowledge sharing

We are continuously working to expand our content library and provide readers with the most useful and relevant digital learning materials.

📩 If you’d like to connect, share feedback, or suggest topics, feel free to reach us through the Contact page.

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

পৃষ্ঠাসমূহ

Labels

Search Your Article

CS