0.7.0 • Published 21 days ago
remark-shaku-code-annotate v0.7.0
remark-shaku-code-annotate
This is a plugin of remark for shaku-code-annotate
Take a look at the demos on:
How to use
import { remark } from "remark";
import html from "remark-html";
import { remarkShakuCodeAnnotate } from "remark-shaku-code-annotate";
export default async function Page() {
const processorShaku = remark()
.use(remarkShakuCodeAnnotate, {
// You can render multiple themes
// themes: ["github-light", "github-dark"],
theme: "github-light",
// Use following flag if you don't want to fall back to shiki when `annotate` is not set
// fallbackToShiki: false
// Following paths are for client-side, example is for next.js
// paths: {
// themes: "/_next/static/shiki/themes",
// wasm: "/_next/static/shiki/dist",
// languages: "/_next/static/shiki/languages",
// },
})
// You should be responsible for the sanitization!!!
// .use(html, { sanitize: false });
const markdown = `
\`\`\`js annotate
const blog = "https://jser.dev"
// ^
// [JSer.dev is the **homepage** for JSer.]
// [Check it out! [jser.dev](https://jser.dev)]
const blog = "https://jser.dev"
// ~~~~~~~~
// [JSer.dev is the homepage for JSer.]
// [Check it out!]
const blog = "jser.dev"
// --------
// [Check it out!]
const blog = "jser.dev"
// ........
// [Check it out!]
const blog = "jser.dev"
// ........
const blog = "jser.dev"
// --------
const blog = "jser.dev"
// ~~~~~~~~
// @highlight
function useSomeEffect({blog}) {
// ~~~~~~~~~~~~~
useEffect(() => {
// do some stuff
// @highlight start
return () => {
location.href = 'https://jser.dev'
}
// ^
// [This cleanup function is super important]
// @highlight end
}, [blog])
}
// @dim
function foo() {
console.log("Hello!")
// @dim start
setTimeout(() => {
console.log("World!")
},1000)
// @dim end
// @focus
function foo(){
console.log("Hello!")
// @focus start
setTimeout(() => {
console.log('World!')
},1000)
// @focus end
}
\`\`\`
`;
const html = await processorShaku.process(markdownShaku);
...
}
Also you need CSS code to get it rendered nicely, surely you can alter it and adapt to your needs.
Check out the CSS code used on Shaku homepage
pre.shaku {
padding: 1rem;
border: 1px solid #eee;
}
pre.shaku .line {
min-height: 1em;
line-height: 1.5;
}
pre.shaku.github-light .line.highlight {
background-color: var(
--color-shaku-highlight-light,
color-mix(in srgb, rgb(5, 118, 149) 15%, #fff)
);
display: block;
}
pre.shaku.github-dark .line.highlight {
background-color: var(--color-shaku-highlight-dark, #2b4a70);
display: block;
}
pre.shaku .line.dim {
opacity: 0.3;
}
.shaku-callout {
background-color: var(--color-shaku-callout-light, #0685ce);
color: #fff;
padding: 0.5em 1ch;
position: relative;
margin: 0.5em 0 0 -0.2ch;
display: inline-block;
border-radius: 2px;
}
pre.shaku.github-dark .shaku-callout {
background-color: var(--color-shaku-callout-dark, #0685ce);
}
.shaku-callout p {
margin: 0;
}
.shaku-callout p a {
color: #fff;
}
.shaku-callout-arrow {
width: 1ch;
height: 1ch;
display: inline-block;
background-color: var(--color-shaku-callout-light, #0685ce);
position: absolute;
top: -0.5ch;
transform: rotate(45deg);
margin-left: 0.2ch;
}
pre.shaku.github-dark .shaku-callout-arrow {
background-color: var(--color-shaku-callout-dark, #0685ce);
}
.shaku-underline {
padding: 0 1ch;
position: relative;
display: block;
border-radius: 3px;
color: var(--color-shaku-underline-light, red);
margin: 0;
width: min-content;
}
pre.shaku.github-dark .shaku-underline {
color: var(--color-shaku-underline-dark, red);
}
.shaku-underline p {
margin: 0;
}
.shaku-underline a {
color: var(--color-shaku-underline-light, red);
}
pre.shaku.github-dark .shaku-underline a {
color: var(--color-shaku-underline-dark, red);
}
.shaku-underline-line {
line-height: 0;
top: 0.5em;
position: absolute;
text-decoration-line: overline;
text-decoration-color: var(--color-shaku-underline-light, red);
color: transparent;
pointer-events: none;
user-select: none;
text-decoration-thickness: 2px;
}
pre.shaku.github-dark .shaku-underline-line {
text-decoration-color: var(--color-shaku-underline-dark, red);
}
.shaku-underline-wavy > .shaku-underline-line {
text-decoration-style: wavy;
top: 0.7em;
}
.shaku-underline-solid > .shaku-underline-line {
text-decoration-style: solid;
}
.shaku-underline-dotted > .shaku-underline-line {
text-decoration-style: dotted;
}
.shaku-inline-highlight {
background-color: #05a4fa30;
border-bottom: 2px solid rgb(9, 113, 239);
margin: 0 1px;
border-radius: 3px;
padding: 0 3px;
}
.shaku-inline-highlight[data-id="1"] {
background-color: #05a4fa30;
border-bottom: 2px solid rgb(9, 113, 239);
}
.shaku-inline-highlight[data-id="2"] {
background-color: #fa05f230;
border-bottom: 2px solid rgb(235, 4, 158);
}
.shaku-inline-highlight[data-id="3"] {
background-color: #05faa930;
border-bottom: 2px solid green;
}
Dark Mode support.
Multiple code blocks are rendered if you pass themes
rather than theme
.
Each code block is marked with its theme name as class name, then you can
easily support dark mode by hiding one or another.
For example.
remark().use(remarkShakuCodeAnnotate, {
themes: ["github-dark", "github-light"],
});
0.7.0
21 days ago
0.6.0
22 days ago
0.5.0
3 months ago
0.4.0
4 months ago
0.3.0
4 months ago
0.0.12
6 months ago
0.1.0
6 months ago
0.1.2
5 months ago
0.2.0
5 months ago
0.1.1
5 months ago
0.1.4
5 months ago
0.1.3
5 months ago
0.1.6
5 months ago
0.1.5
5 months ago
0.0.10
11 months ago
0.0.11
9 months ago
0.0.9
11 months ago
0.0.8
11 months ago
0.0.7
11 months ago
0.0.6
11 months ago
0.0.5
12 months ago
0.0.4
12 months ago
0.0.3
12 months ago
0.0.2
12 months ago
0.0.1
12 months ago