HighlightAuto Component

HighlightAuto automatically detects the language of the code and highlights it. All the code has the same structure.

<HighlightAuto code={sample-code} />

Examples

Javascript

let message = "Hello, world!";
console.log(message);

const age = 25;

if (age > 18) {
  console.log("You are more than 18 years.");
}

Markdown

# This is a heading

This is some paragraph text.

* Here is an unordered list item.
* Another list item.

**This text is bold.**

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
</head>
<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>
</html>

CSS

body {
  font-family: sans-serif;
  margin: 0;
}

h1 {
  text-align: center;
  font-size: 2em;
}

p {
  color: #333;
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: blue;
}

img {
  max-width: 100%;
  height: auto;
}

Typescript

const message: string = "Hello, world!";
console.log(message);

function greet(name: string): string {
  return `Hello, ${name}!`;
}
console.log(greet("Bard"));

Python

message = "Hello, world!"
print(message)

age = 25
if age >= 18:
    print("You are eligible to vote.")

Rust

let message = "Hello, world!";
println!("{}", message);

let age = 25;
if age >= 18 {
  println!("You are eligible to vote.");
}

Props

code: string;
langtag?: boolean;
...restProps

Language Tag: Caution - This may not be accurate.

Set langtag to true to display the language name in the top right corner of the code block.

Language tag style

Customize the language tag background, color, and border-radius using style props.

--langtag-top = 0:                Top position of the langtag
--langtag-right =  0:             Right position of the langtag
--langtag-background =	inherit:  Background color of the langtag
--langtag-color = inherit:        Text color of the langtag
--langtag-border-radius = 0:      Border radius of the langtag
--langtag-padding = 1em:          Padding of the langtag