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

Popular posts from this blog

Excel data prepare notes

  1) How to calculate memberId?   based on contact numbers...     open new sheet past contact no into B column and right it down the formula into A column 2nd             row     =IF(B1=B2, A1+1, A1) ----------------------------------------------------------------------------------------------------------------------------     2) How to calculate End date using start date and duration?     open second sheet past start date in A1 and Second column B2 past duration memberships     =DATE(YEAR(A2),MONTH(A2)+B2,DAY(A2)) note:-

Bootstrap Basic Knowledge & Small Website

                             Introduction: Bootstrap Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page. CSS  # Copy-paste the stylesheet  <link>  into your  <head>  before all other stylesheets to load our CSS. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> JS # Copy-paste the JS  <link>  into your  <head>. <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/...