Programming in object pascal with the Delphi CE IDE (and maybe other stuff).

Wednesday, May 15, 2024

Testing highlight.js

May 15, 2024 Posted by TikoTako , , , No comments
hidden

Ok, tbh, i was going to write it myself but, is 2024, a truckload of content is ai generated then why i dont use some ai too?
So, this at top is written by me and the ai generated description of highlight.js is at the bottom of the page >HERE<

Install/usage:
Go here highlightjs website check the version (11.9.0 atm)
Copypaste this into the <HEAD> of the html of the page:

<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/default.min.css" />
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/languages/go.min.js"></script>
<script>hljs.highlightAll();</script>

Change the 11.9.0 with the current version if is different.
To change the theme, just change the css file in the first line, ad example change "default.min.css" in "docco.css"
Use a tool like >THIS< to convert the code (some characters mess up with the html tags) then paste it between these tags:

<pre><code class="language-html">
</code></pre>

For html ad example or simply this (autodetect):

<pre><code>
</code></pre>

DELPHI:
The the highlighting for Delphi is bugged atm, link: >GITHUB ISSUE<
My bad...
I thought delphi was included in highlight.js but it isn't either in highlight,js nor in highlight.min.js 🙄 i had to import delphi.min.js

program HelloWorld;

{$APPTYPE CONSOLE}

uses
  SysUtils;

(*
	is this a comment?
    yes it is
*)

begin
  try
  	// comment
    WriteLn('Hello, World!');
  except
  {
  	another comment
  }
    on E: Exception do
      Writeln(E.ClassName, ': ', E.Message);
  end;
end.

More to test (tnx Copilot <3)

C

#include <stdio.h>
int main() {
   printf("Hello, World!");
   return 0;
}

C#

using System;
class Program {
    static void Main() {
        Console.WriteLine("Hello, World!");
    }
}

C++

#include <iostream>
    std::cout << "Hello, World!";
    return 0;
}

Java

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

ASM x86, nasm

section .data
    hello db 'Hello, World!',0

section .text
    global _start

_start:
    ; write hello to stdout
    mov eax, 4
    mov ebx, 1
    mov ecx, hello
    mov edx, 13
    int 0x80

    ; exit
    mov eax, 1
    xor ebx, ebx
    int 0x80

Demystifying Highlight.js: A Powerful Syntax Highlighter

Generated by Copilot.

Hello, fellow coders! Today, we’re going to dive into the world of syntax highlighting with a fantastic tool called Highlight.js.

So, what is Highlight.js? It’s a powerful syntax highlighter written in JavaScript. It works its magic by parsing code snippets embedded in your HTML and automatically detecting the language. However, if you’re dealing with a less common language, you can explicitly specify it.

Once Highlight.js knows what language your code is in, it gets to work applying highlighting. It does this by wrapping your code in HTML tags and applying CSS classes to these tags. These classes correspond to the different syntax elements in your code, such as keywords, operators, or literals.

Now, you might be wondering, “How does it decide what colors and styles to use?” Well, that’s where the CSS theme comes into play. Highlight.js comes with a variety of themes you can choose from, or if you’re feeling adventurous, you can create your own!

To get Highlight.js up and running on your page, you’ll need to include the library and a theme CSS file in your HTML. Then, when your page loads, call the hljs.highlightAll() function. This function will find and highlight all code snippets on your page. If you want to highlight specific blocks of code, you can use the hljs.highlightBlock(block) function instead.

And there you have it! With Highlight.js, you can bring your code to life and make it easier for others to read and understand. Happy coding!

I hope this gives you a good idea of how Highlight.js works! If you have any more questions, feel free to ask.

0 comments:

Post a Comment