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

Post a Comment

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:-
Post a Comment
Read more

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/...
Post a Comment
Read more

Object Oriented Programming - Notes

                   Object-Oriented Programming (OOPs) Concept in Java OOP: Object-oriented programming aims to implement real-world entities like inheritance, hiding, polymorphism etc in programming. The main aim of OOP is to bind together the data and the functions that operate on them so that no other part of the code can access this data except that function. Topics : - Class Object Abstraction Encapsulation Inheritance Polymorphism Class:           The  object is a real-world entity. obj consist of properties and tasks performed Ex.           Entity ->human                         |                     name ,color,height task ->  walk(), read() , write() Class :            ...
Post a Comment
Read more