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

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

Ionic framework APK build

write it down into VS CODE - CMD STEP  1:-  ionic build STEP 2 :-  ionic capacitor run android --open       or      ionic capacitor run android -l STEP 3 :-  Then its open the android studio loading file, then go to the Build -> Build bundle -> build APK STEP 4:- APK file save in - mobile-app-> android-> app-> app-> build-> outputs-> apk-> debug
Post a Comment
Read more

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