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

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

How To Create Project -TypeScript

How to create Project File ? Create Project Folder - my-app Install TypeScript - npm install -g typescript Compile -tsc helloworld.ts In your system need nodeJS software install becouse its used for create Local server its to compliation time. Create TypeScript compiler ->  tsc --init     tsc How to Run TypeScript Project : tsc app.ts node app.js Install Bootstrap in your project : cmd :  npm install --save bootstrap@3 One File created node_module in our project Create Local server : npm init  Field all details and Enter  and type Yes. in your project one more file create package.json open package.json file Enter cmd :- npm install --save-dev lite-server script write -> "start" : "lite-server" like this  Then enter :-  npm start 1)  Create one more terminal  for watch your TypeScripte Code           its called typescript watch - cmd -> tsc -w All set Now you work on your project
Post a Comment
Read more