A lightweight library to render codeblock for solid-js
npm install solid-codeblockSimple lightweight solid codeblock component.
html
export const Home = () => {
return Welcome
}} />
href="/snippets/hello-world.clj"
contentLen={28}
/>
href="https://gist.githubusercontent.com/kkharji/4acfd339024edcc14d8b64a895543d0f/raw/6d2d8663816a4cf620147fe1cbcd4a7dd9378ec6/fd.rs"
contentLen={28}
/>
`Installation
#### NPM
bash
npm install solid-codeblock shiki
`
#### PNPM
bash
pnpm add solid-codeblock shiki
`Feature
- Simple API.
- Non-blocking.
- Beatuful Placeholder.
- Github Gist Support.
Example
tsx
const [config, setConfig] = createStore({ dark: false });
{/ This should wrapp the whole appp /}
isDark: () => config.isDark
}}>
`Configuration
$3
typescript
export type ICodeblockProvider = {
/**
* Solid Signal that resolve to whether the theme is dark or light.
*
*/
isDark?: Accessor
/* A map of dark/light themes to load upfront. Default to: {} /
themes?: Record<"dark" | "light", Theme>;
/* A signle theme to load, Default to: dark-plus /
theme?: Theme;
/* A list of languages to load upfront. Default to all the bundled languages. /
langs?: (Lang | ILanguageRegistration)[];
/* Where to look for shiki runtime files Default: https://unpkg.com/shiki/ /
cdnRoot?: string
};
`$3
typescript
export interface ICodeblock {
/* Content Language /
lang: Lang
/* Raw text content /
textContent?: string,
/* URL pointing to an end-point with content. e.g. public resources, gist file /
href?: string,
/* Content length to render placeholder while downloading the content /
contentLen?: number,
}
`$3
$3
css
.cb-container.github-dark, &.github-dark pre {
background: #0d1117 !important;
}
`
$3
css
.cb-container {
border-width: 10px;
border-color: red;
}
``