آموزش W3CSS

آموزش W3.CSS – رنگ‌آمیزی کدها

W3.CSS  از هایلایت کردن کدهای دستوریِ زبان های زیر به خوبی پشتیبانی می کنه:

  • HTML – در containerهایی که حاوی کدهای HTML هستن از کلاس های w3-code htmlHigh استفاده کنین.
  • CSS - در containerهایی که حاوی کدهای CSS هستن از کلاس های w3-code cssHigh استفاده کنین.
  • JS - در containerهایی که حاوی کدهای JS هستن از کلاس های w3-code jsHigh استفاده کنین.

برای این که به فایلِ js لینک کنین و قابلیت پشتیبانی از هایلایت کردن کدهای دستوری را داشته باشین، باید اسکریپت زیر را include کنین:

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

خروجی

خروجی کد بالا بصورت زیر خواهد بود.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش W3CSS

Learn W3CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...