-
-
Notifications
You must be signed in to change notification settings - Fork 2.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* chore: remove unused util * chore: changeset * deps: shiki * wip: first stab at shiki markdoc config * feat: get shiki working! * refactor: return HTML string directly from transform * chore: move shiki to markdoc dev dep * refactor: use async cache with clear docs on why * test: transform units with Shiki config options * refactor: switch to `extends` model * refactor: nodes/ -> extensions/ * feat: raise friendly error for Promise extensions * docs: README * chore: lint * chore: dead file * chore: lowercase for fuzzy find please * fix: bad ctx spread * chore: clean up cache, add shiki imp error * chore: add shiki to optional peer deps * chore: hoist those consts * docs: more explicit "install shiki now please" Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * oops bad find and replace * chore: update changeset * nit: period haunts me --------- Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
- Loading branch information
1 parent
7851f92
commit 1efaef6
Showing
13 changed files
with
383 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
--- | ||
'@astrojs/markdoc': patch | ||
--- | ||
|
||
Add support for syntax highlighting with Shiki. Install `shiki` in your project with `npm i shiki`, and apply to your Markdoc config using the `extends` option: | ||
|
||
```js | ||
// markdoc.config.mjs | ||
import { defineMarkdocConfig, shiki } from '@astrojs/markdoc/config'; | ||
export default defineMarkdocConfig({ | ||
extends: [ | ||
await shiki({ /** Shiki config options */ }), | ||
], | ||
}) | ||
``` | ||
|
||
Learn more in the [`@astrojs/markdoc` README.](https://docs.astro.build/en/guides/integrations-guide/markdoc/#syntax-highlighting) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,19 @@ | ||
import type { ConfigType as MarkdocConfig } from '@markdoc/markdoc'; | ||
import _Markdoc from '@markdoc/markdoc'; | ||
import { nodes as astroNodes } from './nodes/index.js'; | ||
import { heading } from './heading-ids.js'; | ||
|
||
export type AstroMarkdocConfig<C extends Record<string, any> = Record<string, any>> = | ||
MarkdocConfig & { | ||
ctx?: C; | ||
extends?: ResolvedAstroMarkdocConfig[]; | ||
}; | ||
|
||
export type ResolvedAstroMarkdocConfig = Omit<AstroMarkdocConfig, 'extends'>; | ||
|
||
export const Markdoc = _Markdoc; | ||
export const nodes = { ...Markdoc.nodes, ...astroNodes }; | ||
export const nodes = { ...Markdoc.nodes, heading }; | ||
export { shiki } from './extensions/shiki.js'; | ||
|
||
export function defineMarkdocConfig(config: MarkdocConfig): MarkdocConfig { | ||
export function defineMarkdocConfig(config: AstroMarkdocConfig): AstroMarkdocConfig { | ||
return config; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,138 @@ | ||
// @ts-expect-error Cannot find module 'astro/runtime/server/index.js' or its corresponding type declarations. | ||
import { unescapeHTML } from 'astro/runtime/server/index.js'; | ||
import type { ShikiConfig } from 'astro'; | ||
import type * as shikiTypes from 'shiki'; | ||
import type { AstroMarkdocConfig } from '../config.js'; | ||
import Markdoc from '@markdoc/markdoc'; | ||
import { MarkdocError } from '../utils.js'; | ||
|
||
// Map of old theme names to new names to preserve compatibility when we upgrade shiki | ||
const compatThemes: Record<string, string> = { | ||
'material-darker': 'material-theme-darker', | ||
'material-default': 'material-theme', | ||
'material-lighter': 'material-theme-lighter', | ||
'material-ocean': 'material-theme-ocean', | ||
'material-palenight': 'material-theme-palenight', | ||
}; | ||
|
||
const normalizeTheme = (theme: string | shikiTypes.IShikiTheme) => { | ||
if (typeof theme === 'string') { | ||
return compatThemes[theme] || theme; | ||
} else if (compatThemes[theme.name]) { | ||
return { ...theme, name: compatThemes[theme.name] }; | ||
} else { | ||
return theme; | ||
} | ||
}; | ||
|
||
const ASTRO_COLOR_REPLACEMENTS = { | ||
'#000001': 'var(--astro-code-color-text)', | ||
'#000002': 'var(--astro-code-color-background)', | ||
'#000004': 'var(--astro-code-token-constant)', | ||
'#000005': 'var(--astro-code-token-string)', | ||
'#000006': 'var(--astro-code-token-comment)', | ||
'#000007': 'var(--astro-code-token-keyword)', | ||
'#000008': 'var(--astro-code-token-parameter)', | ||
'#000009': 'var(--astro-code-token-function)', | ||
'#000010': 'var(--astro-code-token-string-expression)', | ||
'#000011': 'var(--astro-code-token-punctuation)', | ||
'#000012': 'var(--astro-code-token-link)', | ||
}; | ||
|
||
const PRE_SELECTOR = /<pre class="(.*?)shiki(.*?)"/; | ||
const LINE_SELECTOR = /<span class="line"><span style="(.*?)">([\+|\-])/g; | ||
const INLINE_STYLE_SELECTOR = /style="(.*?)"/; | ||
|
||
/** | ||
* Note: cache only needed for dev server reloads, internal test suites, and manual calls to `Markdoc.transform` by the user. | ||
* Otherwise, `shiki()` is only called once per build, NOT once per page, so a cache isn't needed! | ||
*/ | ||
const highlighterCache = new Map<string, shikiTypes.Highlighter>(); | ||
|
||
export async function shiki({ | ||
langs = [], | ||
theme = 'github-dark', | ||
wrap = false, | ||
}: ShikiConfig = {}): Promise<AstroMarkdocConfig> { | ||
let getHighlighter: (options: shikiTypes.HighlighterOptions) => Promise<shikiTypes.Highlighter>; | ||
try { | ||
getHighlighter = (await import('shiki')).getHighlighter; | ||
} catch { | ||
throw new MarkdocError({ | ||
message: 'Shiki is not installed. Run `npm install shiki` to use the `shiki` extension.', | ||
}); | ||
} | ||
theme = normalizeTheme(theme); | ||
|
||
const cacheID: string = typeof theme === 'string' ? theme : theme.name; | ||
if (!highlighterCache.has(cacheID)) { | ||
highlighterCache.set( | ||
cacheID, | ||
await getHighlighter({ theme }).then((hl) => { | ||
hl.setColorReplacements(ASTRO_COLOR_REPLACEMENTS); | ||
return hl; | ||
}) | ||
); | ||
} | ||
const highlighter = highlighterCache.get(cacheID)!; | ||
|
||
for (const lang of langs) { | ||
await highlighter.loadLanguage(lang); | ||
} | ||
return { | ||
nodes: { | ||
fence: { | ||
attributes: Markdoc.nodes.fence.attributes!, | ||
transform({ attributes }) { | ||
let lang: string; | ||
|
||
if (typeof attributes.language === 'string') { | ||
const langExists = highlighter | ||
.getLoadedLanguages() | ||
.includes(attributes.language as any); | ||
if (langExists) { | ||
lang = attributes.language; | ||
} else { | ||
// eslint-disable-next-line no-console | ||
console.warn( | ||
`[Shiki highlighter] The language "${attributes.language}" doesn't exist, falling back to plaintext.` | ||
); | ||
lang = 'plaintext'; | ||
} | ||
} else { | ||
lang = 'plaintext'; | ||
} | ||
|
||
let html = highlighter.codeToHtml(attributes.content, { lang }); | ||
|
||
// Q: Could these regexes match on a user's inputted code blocks? | ||
// A: Nope! All rendered HTML is properly escaped. | ||
// Ex. If a user typed `<span class="line"` into a code block, | ||
// It would become this before hitting our regexes: | ||
// <span class="line" | ||
|
||
html = html.replace(PRE_SELECTOR, `<pre class="$1astro-code$2"`); | ||
// Add "user-select: none;" for "+"/"-" diff symbols | ||
if (attributes.language === 'diff') { | ||
html = html.replace( | ||
LINE_SELECTOR, | ||
'<span class="line"><span style="$1"><span style="user-select: none;">$2</span>' | ||
); | ||
} | ||
|
||
if (wrap === false) { | ||
html = html.replace(INLINE_STYLE_SELECTOR, 'style="$1; overflow-x: auto;"'); | ||
} else if (wrap === true) { | ||
html = html.replace( | ||
INLINE_STYLE_SELECTOR, | ||
'style="$1; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;"' | ||
); | ||
} | ||
|
||
// Use `unescapeHTML` to return `HTMLString` for Astro renderer to inline as HTML | ||
return unescapeHTML(html); | ||
}, | ||
}, | ||
}, | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.