Skip to main content

How to highlight and stylize code like Text editor/IDE into website?

Programming keywords into highlight format  :-

In Script Tag :-
 <script type="text/javascript"
 src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script>

<script>hljs.initHighlightingOnLoad();</script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/agate.min.css">

In Body :-
    
<body>
    <pre>
        <code class="css" style="font-size: 20px">

            //Write your code here...

            import { Component, OnInit } from '@angular/core';
            @Component({
              selector: 'app-post',
              templateUrl: './post.component.html',
              styleUrls: ['./post.component.css']
            })
            export class PostComponent implements OnInit {
              title: string = 'World Ocean Day';
              constructor() { }
              ngOnInit(): void {
              }
            }
        </code>
    </pre>
 </body>

Output :- 
    

* If you wont to change them color or text color  to used below links : 

Note : If you wont Demo video so please comment me

Comments