summaryrefslogtreecommitdiff
path: root/packages/astro-prism/src
diff options
context:
space:
mode:
Diffstat (limited to 'packages/astro-prism/src')
-rw-r--r--packages/astro-prism/src/highlighter.ts39
-rw-r--r--packages/astro-prism/src/index.ts2
-rw-r--r--packages/astro-prism/src/plugin.ts187
3 files changed, 228 insertions, 0 deletions
diff --git a/packages/astro-prism/src/highlighter.ts b/packages/astro-prism/src/highlighter.ts
new file mode 100644
index 000000000..99810b435
--- /dev/null
+++ b/packages/astro-prism/src/highlighter.ts
@@ -0,0 +1,39 @@
+import Prism from 'prismjs';
+import loadLanguages from 'prismjs/components/index.js';
+import { addAstro } from './plugin.js';
+
+const languageMap = new Map([['ts', 'typescript']]);
+
+export function runHighlighterWithAstro(lang: string | undefined, code: string) {
+ if (!lang) {
+ lang = 'plaintext';
+ }
+ let classLanguage = `language-${lang}`;
+ const ensureLoaded = (language: string) => {
+ if (language && !Prism.languages[language]) {
+ loadLanguages([language]);
+ }
+ };
+
+ if (languageMap.has(lang)) {
+ ensureLoaded(languageMap.get(lang)!);
+ } else if (lang === 'astro') {
+ ensureLoaded('typescript');
+ addAstro(Prism);
+ } else {
+ ensureLoaded('markup-templating'); // Prism expects this to exist for a number of other langs
+ ensureLoaded(lang);
+ }
+
+ if (lang && !Prism.languages[lang]) {
+ console.warn(`Unable to load the language: ${lang}`);
+ }
+
+ const grammar = Prism.languages[lang];
+ let html = code;
+ if (grammar) {
+ html = Prism.highlight(code, grammar, lang);
+ }
+
+ return { classLanguage, html };
+}
diff --git a/packages/astro-prism/src/index.ts b/packages/astro-prism/src/index.ts
new file mode 100644
index 000000000..f1dc0d801
--- /dev/null
+++ b/packages/astro-prism/src/index.ts
@@ -0,0 +1,2 @@
+// @ts-expect-error
+export { default as Prism } from '../Prism.astro';
diff --git a/packages/astro-prism/src/plugin.ts b/packages/astro-prism/src/plugin.ts
new file mode 100644
index 000000000..eed02a304
--- /dev/null
+++ b/packages/astro-prism/src/plugin.ts
@@ -0,0 +1,187 @@
+export function addAstro(Prism: typeof import('prismjs')) {
+ if (Prism.languages.astro) {
+ return;
+ }
+
+ let scriptLang: string;
+ if (Prism.languages.typescript) {
+ scriptLang = 'typescript';
+ } else {
+ scriptLang = 'javascript';
+ console.warn(
+ 'Prism TypeScript language not loaded, Astro scripts will be treated as JavaScript.',
+ );
+ }
+
+ let script = Prism.util.clone(Prism.languages[scriptLang]);
+
+ // eslint-disable-next-line regexp/no-useless-assertions
+ let space = /(?:\s|\/\/.*(?!.)|\/\*(?:[^*]|\*(?!\/))\*\/)/.source;
+ let braces = /(?:\{(?:\{(?:\{[^{}]*\}|[^{}])*\}|[^{}])*\})/.source;
+ let spread = /(?:\{<S>*\.{3}(?:[^{}]|<BRACES>)*\})/.source;
+
+ function re(source: string, flags?: string) {
+ source = source
+ .replace(/<S>/g, function () {
+ return space;
+ })
+ .replace(/<BRACES>/g, function () {
+ return braces;
+ })
+ .replace(/<SPREAD>/g, function () {
+ return spread;
+ });
+ return RegExp(source, flags);
+ }
+
+ spread = re(spread).source;
+
+ Prism.languages.astro = Prism.languages.extend('markup', script);
+
+ (Prism.languages.astro as any).tag.pattern = re(
+ /<\/?(?:[\w.:-]+(?:<S>+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|<BRACES>))?|<SPREAD>))*<S>*\/?)?>/
+ .source,
+ );
+
+ (Prism.languages.astro as any).tag.inside['tag'].pattern = /^<\/?[^\s>/]*/;
+ (Prism.languages.astro as any).tag.inside['attr-value'].pattern =
+ /=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/;
+ (Prism.languages.astro as any).tag.inside['tag'].inside['class-name'] =
+ /^[A-Z]\w*(?:\.[A-Z]\w*)*$/;
+ (Prism.languages.astro as any).tag.inside['comment'] = script['comment'];
+
+ Prism.languages.insertBefore(
+ 'inside',
+ 'attr-name',
+ {
+ spread: {
+ pattern: re(/<SPREAD>/.source),
+ inside: Prism.languages.astro,
+ },
+ },
+ (Prism.languages.astro as any).tag,
+ );
+
+ Prism.languages.insertBefore(
+ 'inside',
+ 'special-attr',
+ {
+ script: {
+ // Allow for two levels of nesting
+ pattern: re(/=<BRACES>/.source),
+ inside: {
+ 'script-punctuation': {
+ pattern: /^=(?=\{)/,
+ alias: 'punctuation',
+ },
+ rest: Prism.languages.astro,
+ },
+ alias: `language-${scriptLang}`,
+ },
+ },
+ (Prism.languages.astro as any).tag,
+ );
+
+ // The following will handle plain text inside tags
+ let stringifyToken = function (token: any) {
+ if (!token) {
+ return '';
+ }
+ if (typeof token === 'string') {
+ return token;
+ }
+ if (typeof token.content === 'string') {
+ return token.content;
+ }
+ return token.content.map(stringifyToken).join('');
+ };
+
+ let walkTokens = function (tokens: any) {
+ let openedTags: any[] = [];
+ for (let i = 0; i < tokens.length; i++) {
+ let token = tokens[i];
+
+ // This breaks styles, not sure why
+ if (token.type === 'style') {
+ return;
+ }
+
+ let notTagNorBrace = false;
+
+ if (typeof token !== 'string') {
+ if (token.type === 'tag' && token.content[0] && token.content[0].type === 'tag') {
+ // We found a tag, now find its kind
+
+ if (token.content[0].content[0].content === '</') {
+ // Closing tag
+ if (
+ openedTags.length > 0 &&
+ openedTags[openedTags.length - 1].tagName ===
+ stringifyToken(token.content[0].content[1])
+ ) {
+ // Pop matching opening tag
+ openedTags.pop();
+ }
+ } else {
+ if (token.content[token.content.length - 1].content === '/>') {
+ // Autoclosed tag, ignore
+ } else {
+ // Opening tag
+ openedTags.push({
+ tagName: stringifyToken(token.content[0].content[1]),
+ openedBraces: 0,
+ });
+ }
+ }
+ } else if (openedTags.length > 0 && token.type === 'punctuation' && token.content === '{') {
+ // Here we might have entered a Astro context inside a tag
+ openedTags[openedTags.length - 1].openedBraces++;
+ } else if (
+ openedTags.length > 0 &&
+ openedTags[openedTags.length - 1].openedBraces > 0 &&
+ token.type === 'punctuation' &&
+ token.content === '}'
+ ) {
+ // Here we might have left a Astro context inside a tag
+ openedTags[openedTags.length - 1].openedBraces--;
+ } else {
+ notTagNorBrace = true;
+ }
+ }
+ if (notTagNorBrace || typeof token === 'string') {
+ if (openedTags.length > 0 && openedTags[openedTags.length - 1].openedBraces === 0) {
+ // Here we are inside a tag, and not inside a Astro context.
+ // That's plain text: drop any tokens matched.
+ let plainText = stringifyToken(token);
+
+ // And merge text with adjacent text
+ if (
+ i < tokens.length - 1 &&
+ (typeof tokens[i + 1] === 'string' || tokens[i + 1].type === 'plain-text')
+ ) {
+ plainText += stringifyToken(tokens[i + 1]);
+ tokens.splice(i + 1, 1);
+ }
+ if (i > 0 && (typeof tokens[i - 1] === 'string' || tokens[i - 1].type === 'plain-text')) {
+ plainText = stringifyToken(tokens[i - 1]) + plainText;
+ tokens.splice(i - 1, 1);
+ i--;
+ }
+
+ tokens[i] = new Prism.Token('plain-text', plainText, undefined, plainText);
+ }
+ }
+
+ if (token.content && typeof token.content !== 'string') {
+ walkTokens(token.content);
+ }
+ }
+ };
+
+ Prism.hooks.add('after-tokenize', function (env: any) {
+ if (env.language !== 'astro') {
+ return;
+ }
+ walkTokens(env.tokens);
+ });
+}