Highlight Hero is a powerful library designed to highlight code in Markdown content. It comes packed with a variety of features to enhance the presentation and functionality of code snippets in your blogs, documentation, and more.
Note- If you are on npmjs, please head to Github for a better understanding of usage
Line Highlighting:Highlight specific lines within your code snippets, just like GitHub.Word Highlighting:Emphasize important words or sections within your code.Copy to Clipboard:Easily copy code snippets to your clipboard with a single click.Line Numbering:Display line numbers alongside your code for easy reference.File Naming:Show the name of the file from which the code snippet originates.Syntax Error Detection:Ensure your code is error-free for users.
To install Highlight Hero, you can use npm:
npm install highlight-hero
Highlight Hero is designed to be easy to use and integrate into your projects. Simply download using npm then import the library and use the provided functions to highlight your code snippets.
import HighlightHero from 'dist/highlight-hero.js';
// Markdown String can come from anywhere ( maybe some backend )
// Note it should start and end with 3 backticks (```)
const markdownText = "";
// Initialize the class
const highlighter = new HighlightHero();
// Transform markdown code content
const html = highlighter.HighlightCode(markdownText);
// Display transformed HTML or store it somewhere
document.getElementById('result').innerHTML = html;You are provided with bunch of options that can be directly used in your markdown.
npm install highlight-hero
Once you have downloaded the highlight-hero you will be able to see dist folder with 2 files highlight-hero.js and highlight-hero.css. These 2 files are all it takes to beautify your code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown Highlighter</title>
// Stylesheet
<link rel="stylesheet" href="../dist/highlight-hero.css">
</head>
<body>
<h1>Markdown Code Highlighter</h1>
<div id="result"></div>
<script type="module">
import HighlightHero from '../dist/highlight-hero.js';
const markdownText = `
\`\`\`java ln check lh={2-4} name={"SomeName.java"}
import java.util.*;
clss Arjit{
public static void main(String s[]){
System.out.println("Hello World");
}
}
\`\`\`
`;
const highlighter = new HighlightHero();
const html = highlighter.HighlightCode(markdownText);
document.getElementById('result').innerHTML = html;
</script>
</body>
</html>
import { useEffect, useState } from 'react'
import HighlightHero from '../node_modules/highlight-hero'; // Adjust the path if necessary
function App() {
const [highlightedCode, setHighlightedCode] = useState('');
useEffect(() => {
const markdownText = `
\`\`\`java ln check
import java.util.*;
class Arjit{
public static void main(String s[]){
System.out.println("Hello World");
}
}
\`\`\`
`;
const highlighter = new HighlightHero();
const html = highlighter.HighlightCode(markdownText);
setHighlightedCode(html);
}, []);
return (
<>
<div>
<h1>Markdown Code Highlighter</h1>
<div id="result" dangerouslySetInnerHTML={{ __html: highlightedCode }}></div>
</div>
</>
)
}
export default App
This library was written for Astro and once you have your astro integration in place all you need to worry about is write your blogs in markdown format and nothing else.
Step 1: : Create a file named astro-highlight-hero.js in the root of your astro website.
import HighlightHero from 'highlight-hero';
import { visit } from 'unist-util-visit';
const highlighter = new HighlightHero();
export default function astroHighlightHero() {
return {
name: 'astro-highlight-hero',
hooks: {
'astro:config:setup': ({ updateConfig }) => {
updateConfig({
markdown: {
remarkPlugins: [
() => async (tree) => {
visit(tree, 'code', (node) => {
const { lang, meta, value } = node;
if (value) {
const codeBlock = `\`\`\`${lang || ''} ${meta || ''}\n${value}\n\`\`\``;
const highlightedCode = highlighter.HighlightCode(codeBlock);
node.type= 'html';
node.value = highlightedCode;
}
});
},
],
},
});
},
},
};
}
Step 2: : Add the integration in astro.config.mjs
import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import astroHighlightHero from './astro-highlight-hero';
import sitemap from '@astrojs/sitemap';
// https://astro.build/config
export default defineConfig({
site: 'https://example.com',
integrations: [mdx(), sitemap(), astroHighlightHero()],
});
Step 3: : Start writing markdown files and you are good to go.
Nothing special just write your markdown code(along with language mentioned or not) as you normally would and it will be highlighted.
```java
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
To add line numbering just use ln keyword anywhere in 1st line of markdown code.
```java ln
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
Use the name keyword to give name to the file your are writing
```java ln name={"hello.java"}
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
Mention the words you want to highlight with wh keyword and inside curly braces with space seperation
- Highlight a particular word in whole block
```java ln name={"hello.java"} wh={public}
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
- Highlight a particular word in a particular line
```java ln name={"hello.java"} wh={public,2}
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
- Highlight multiple words
```java ln name={"hello.java"} wh={public,2 World!}
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
Mention the lines you want to highlight with lh keyword and inside curly braces with space seperation
- Highlight a particular line
```java ln name={"hello.java"} lh={3}
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
- Highlight a code block (multiple lines)
```java ln name={"hello.java"} lh={2-4}
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
- Highlight multiple Code Blocks
```java ln name={"hello.java"} lh={3 7-9}
public class HelloWorld {
public static findSum(int a, int b){
return a+b;
}
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
- Highlight lines with Accepted and Rejected Colors (just like github's)
```java ln name={"hello.java"} lh={3,G 7-9,R}
public class HelloWorld {
public static findSum(int a, int b){
return a+b;
}
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
-
Use the
checkkeyword if you want to check for syntax errors in the code block. -
This is one of the important features as I was tired of copying wrong code from websites, hence your users can see if there are syntax errors right on your blog itself.
-
For now only
javaandjavascriptis supported.
```java ln name={"hello.java"} check
public class HelloWorld {
public static void main(String[ args) {
System.out.println("Hello, World!");
}
}
If you have any suggestions, bug reports, or feature requests, feel free to open an issue or submit a pull request. Your feedback is highly appreciated. We are always looking for ways to improve Highlight Hero and make it more useful for developers.
[ ] Code Explain (on hovering show a tooltip maybe that can explain code better)
[ ] Code Folding (Just like VS-Code let users fold methods)
[ ] Custom Themes
[ ] Give View
[ ] Tab View : Give tabs of Code, on clicking shows code of that file
[ ] Directory View : Show collapsible folders and files on left bar and code of a particular file on right ( just like VSCode )