Use Sugar High Syntax Highlighting with Remark Plugin. Source Code ↗
npm install remark remark-html remark-gfm remark-sugar-high
import { remark } from 'remark'
import { highlight } from 'remark-sugar-high'
import html from 'remark-html'
import gfm from 'remark-gfm'
async function renderMarkdown(input) {
const markdown = await remark()
.use(gfm)
.use(highlight)
.use(html, { sanitize: false })
.process(input)
return markdown.toString()
}
export default async Preview({ markdown }) {
const html = await renderMarkdown(markdown)
return (
<div dangerouslySetInnerHTML={{ __html: html }} />
)
}
// Here is a simple function
async function hello() {
console.log('Hello, world from JavaScript!')
return 123 // return a number
}
await hello()
use std::fs; // Import file system utilities
use std::io::{self, Write}; // Import I/O utilities
/* Read file content into a string */
fn read_file(path: &str) -> io::Result<String> {
fs::read_to_string(path) // Read file content into a String
}
fn main() {
match read_file("example.txt") {
Ok(content) => println!("File content:
{}", content),
Err(e) => eprintln!("Error reading file: {}", e),
}
}
"""
This is a multi-line comment.
Demonstrating functions, loops, and type hints.
"""
def factorial(n: int) -> int:
"""Compute the factorial of a number."""
result = 1
for i in range(2, n + 1):
result *= i
return result
print(factorial(5)) # Output: 120
body {
font-family: 'Geist Sans', sans-serif;
background-color: #f0f0f0;
color: #333; /* text color */
}
h1 {
color: #0070f3;
}
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>