Skip to main content

Code Snippets Syntax Highlighting | Rustcode

by Rustcode
Code-Snippets-Syntax-Highlighting-html-css-and-Js-rustcode

In this article, we will learn about Syntax Highlighter because sometimes, we need to embed code snippets in our website or blog, so we also need syntax highlighter so that we can read and understand the code easily. . Here we will use the "deckdecogo" plugin for a syntax highlighter, however, it is a very advanced plugin that provides us with code highlighting as well as code editing, line number, line highlight options.


1. HTML STRUCTURE 

<!DOCTYPE html>
<html>
<head>
<title>Code Snippets Syntax Highlighting | Rustcode</title>
</head>
<body>

 main content.

</body>
</html>


2. DECKDECKGO PLUGIN

The basic HTML structure is ready for us, now let's include JavaScript plugin in this HTML document. You can download this plugin from here. 

<!DOCTYPE html>
<html>
<head>
<title>Code Snippets Syntax Highlighting | Rustcode</title>
<script type="module" src="https://unpkg.com/@deckdeckgo/highlight-code@latest/dist/deckdeckgo-highlight-code/deckdeckgo-highlight-code.esm.js"></script>
</head>
<body>

 main content.

</body>
</html>


3. CONTENT

<body>

<deckgo-highlight-code language="css">
<code slot="code">
*{
margin: 0px;
padding: 0px;
font-family: "Poppins";
}
.container{
width: 100%;
height: 100%;
}
</code>
</deckgo-highlight-code>

<deckgo-highlight-code language="html">
<code slot="code">
&lt;p> Thanks For Watching! &lt;/p>
</code>
</deckgo-highlight-code>

</body>


4. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also learn about web development from there.


5. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.


RELATED POST:

Comments

Post a Comment