import * as fs from 'fs'; import * as path from 'path'; import hljs from 'highlight.js'; import Image from 'next/image'; import { useEffect, useState } from 'react'; import { HTMLTagsExample } from '../components/cdn-block'; import { CodeBlock } from '../components/codeblock'; import { LightBackground } from '../components/lightbackground'; import { Markdown } from '../components/markdown'; import themes from '../data/themes.json'; import { MainLayout } from '../layouts/main'; const SNIPPETS_DIR = path.resolve(process.cwd(), 'data', 'snippets'); const THEME_COUNT = themes.length; const LANG_COUNT = hljs.listLanguages().length; const GH_API = 'https://api.github.com/repos/highlightjs/highlight.js/releases'; const SNIPPETS = [ 'bash', 'clojure', 'coffeescript', 'cpp', 'csharp', 'css', 'elm', 'go', 'handlebars', 'http', 'ini', 'java', 'javascript', 'json', 'makefile', 'objectivec', 'prolog', 'python', 'ruby', 'rust', 'sql', 'swift', 'typescript', 'xml', ]; interface Props { languages: string[]; latestVersion: string; snippets: Record; } function randInt(max) { return Math.floor(Math.random() * Math.floor(max)); } export async function getStaticProps() { // Load our sample code snippets const snippets = {}; SNIPPETS.forEach((language) => { const filePath = path.resolve(SNIPPETS_DIR, `${language}.txt`); snippets[language] = fs.readFileSync(filePath, 'utf-8'); }); // Load the latest version from GitHub let currRelease = 'Unknown'; const ghResponse = await (await fetch(GH_API)).json(); if (ghResponse.length >= 1) { currRelease = ghResponse[0].tag_name.replace('v', ''); } return { props: { languages: Object.keys(snippets), latestVersion: currRelease, snippets, }, }; } const description = `The Internet's favorite JavaScript syntax highlighter supporting Node.js and the web.`; const Home = ({ languages, latestVersion, snippets }: Props) => { const [snipIndex, setSnipIndex] = useState(0); const [lang, setLang] = useState(languages[snipIndex]); const [snippet, setSnippet] = useState(snippets[lang]); const randomizeSnippet = () => setSnipIndex(randInt(languages.length)); useEffect(randomizeSnippet, []); useEffect(() => { const language = languages[snipIndex]; setLang(language); setSnippet(snippets[language]); }, [snipIndex]); return (

{description}

  • {LANG_COUNT} languages and {THEME_COUNT} themes
  • Automatic language detection
  • Works with any HTML markup
  • Zero dependencies
  • Compatible with any JS framework
  • Supports Node.js and Deno

Current release: {latestVersion}

Trusted by

  • Stack Overflow
  • Discord
Hello World!', { language: 'xml' } ).value ~~~ For more details, see [the "Importing the Library" section of our README](https://github.com/highlightjs/highlight.js#importing-the-library). ### As HTML Tags {#as-html-tags} `} /> \` tags; it tries to detect the language automatically. If automatic detection does not work for you, you can specify the language in the class attribute: ~~~html
...
~~~ `} />
); }; export default Home;