W3.CSS provides several classes for displaying inline and multiline blocks of code.
Displaying Inline Code: Inline code should be wrapped in <code> tags with w3-codespan as the class. The resulting text will be displayed in a fixed-width font and given a red font color with a light grey background.
Note: The < and > tags should be replaced with < and > respectively.
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "w3-container w3-center" >
< h2 class = "w3-text-green w3-xxlarge" >
GeeksForGeeks
</ h2 >
</ div >
< div class = "w3-container" >
< h3 class = "w3-text-blue" >Inline Code:</ h3 >
< p >
We define paragraphs in HTML using the
< code class = "w3-codespan" >< p ></ code > tag.
</ p >
</ div >
</ body >
</ html >
|
Output:
Displaying Multiline Code Blocks: Multiline code should be wrapped in <div> tags with class w3-code. The resulting text will be displayed in a readable mono-spaced font with spaces and line breaks being preserved.
Note: The < and > tags should be replaced with < and > respectively.
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "w3-container w3-center" >
< h2 class = "w3-text-green w3-xxlarge" >
GeeksForGeeks
</ h2 >
</ div >
< div class = "w3-container" >
< h3 class = "w3-text-blue" >
Multiline Code Block:
</ h3 >
< div class = "w3-code notranslate w3-card" >
< h1 >Title One</ h1 > < br >
< p >A line of sample text</ p >
< br > < p >Another line of sample
text</ p > < br > < p >Yet another
line of sample text</ p >
</ div >
</ div >
</ body >
</ html >
|
Output:
Last Updated :
02 Mar, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...