Static file generator

[JoshuaBehrens]

Scenario

Hi I am looking to swap my code highlighting in our framework documentation to use codehike. We only use static files in our hosting and barely use javascript to keep our page performant and "pure". I am not afraid, that codehike is bloated, it seems not to be! But I try to keep the page in a similar state as it is right now.

I fiddled down a small PoC on how I can pre-render the mdx files in a CI/CD. It works out quite ok.

import { evaluate } from '@mdx-js/mdx'
import * as provider from '@mdx-js/react'

import { remarkCodeHike } from "@code-hike/mdx";

import React from 'react'
import * as runtime from 'react/jsx-runtime';
import { renderToStaticMarkup } from 'react-dom/server'

import fs from 'fs';

const theme = JSON.parse(fs.readFileSync('node_modules/shiki/themes/nord.json'));
const mdxOptions = {
    remarkPlugins: [
        [
            remarkCodeHike,
            {
                theme,
                lineNumbers: false
            }
        ],
    ],
    useDynamicImport: true
};
const template = fs.readFileSync('demo.mdx', 'utf-8');
const { default: MDXContent } = await evaluate(
    template,
    {
        ...provider,
        ...runtime,
        ...mdxOptions
    }
);
const css = fs.readFileSync("node_modules/@code-hike/mdx/dist/index.css", 'utf-8');
const rendered = renderToStaticMarkup(React.createElement(MDXContent));
const page = `<style>${css}</style>${rendered}`;

await fs.writeFileSync('demo.html', page);

demo.html renders visually fine except:

• Code is hidden due to an opacity: 0
• tab switch can not display other file as its content is not in the HTML
• tab switch does not function

I am not surprised that static page is not interactive. I am neither surprised that due to the lack of a bundler I can't import json file nor include css by import. Some features can be patched manually but other demos will definitely not work that easily, like the scroll watcher code change.

Are there any plans to support static file generation? Is it already possible and I don't see it? I am fine with non-interactive solutions (as in printable) where I at least see a correctly highlighted code snippet.

[pomber]

Hi, you need JS to use Code Hike. No plans to make it work without JS at the moment. I'm experimenting with something like that in another project, but it's too early.

[JoshuaBehrens]

I see the need for JS for the complete feature set as well. But highlighting code without interactive features would still be possible. Can one support bright in any way?