diff --git a/apps/blog-app/src/app/app.config.ts b/apps/blog-app/src/app/app.config.ts
index 653ebe096..55ea02cab 100644
--- a/apps/blog-app/src/app/app.config.ts
+++ b/apps/blog-app/src/app/app.config.ts
@@ -1,4 +1,5 @@
import { provideContent, withMarkdownRenderer } from '@analogjs/content';
+import { withShikiHighlighter } from '@analogjs/content/shiki-highlighter';
import { provideFileRouter } from '@analogjs/router';
import { provideHttpClient } from '@angular/common/http';
import { ApplicationConfig } from '@angular/core';
@@ -13,7 +14,12 @@ export const appConfig: ApplicationConfig = {
provideHttpClient(),
provideClientHydration(),
provideContent(
- withMarkdownRenderer({ loadMermaid: () => import('mermaid') })
+ withMarkdownRenderer({ loadMermaid: () => import('mermaid') }),
+ withShikiHighlighter({
+ highlighter: {
+ additionalLangs: ['mermaid'],
+ },
+ })
),
provideFileRouter(
withInMemoryScrolling({ anchorScrolling: 'enabled' }),
diff --git a/apps/blog-app/src/content/2022-12-31-my-second-post.md b/apps/blog-app/src/content/2022-12-31-my-second-post.md
index 96d5ae743..57af7cec4 100644
--- a/apps/blog-app/src/content/2022-12-31-my-second-post.md
+++ b/apps/blog-app/src/content/2022-12-31-my-second-post.md
@@ -18,6 +18,22 @@ function sum(n1: number, n2: number): number {
}
```
+```angular-ts
+@Component({
+ template: `
+ @if (show()) {
+ Hi there
+ } @else {
+ Booo!
+ Show
+ }
+ `
+})
+export class MyCmp {
+ show = signal(true);
+}
+```
+
### Section 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
diff --git a/apps/blog-app/src/styles.css b/apps/blog-app/src/styles.css
index 5666addb9..aeb0531d3 100644
--- a/apps/blog-app/src/styles.css
+++ b/apps/blog-app/src/styles.css
@@ -2,4 +2,4 @@
/* include CSS for prism toolbar */
@import 'prismjs/plugins/toolbar/prism-toolbar.css';
/* check node_modules/prismjs/themes/ for the available themes */
-@import 'prismjs/themes/prism-tomorrow';
+@import 'prismjs/themes/prism-tomorrow.css';
diff --git a/apps/docs-app/docs/features/routing/content.md b/apps/docs-app/docs/features/routing/content.md
index 13aa1263f..5a50f732b 100644
--- a/apps/docs-app/docs/features/routing/content.md
+++ b/apps/docs-app/docs/features/routing/content.md
@@ -1,6 +1,3 @@
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
# Content Routes
Analog also supports using markdown content as routes, and rendering markdown content in components.
@@ -44,7 +41,25 @@ Analog is a meta-framework for Angular.
[Back Home](./)
```
-### Using the diff Highlight Plugin
+### PrismJS Syntax Highlighting
+
+Analog supports syntax highlighting with PrismJS. To enable syntax highlighting with `PrismJS`, add `withPrismHighlighter()` to the `provideContent()` function in `app.config.ts`.
+
+```diff-ts
+import { ApplicationConfig } from '@angular/core';
+import { provideContent, withMarkdownRenderer } from '@analogjs/content';
++ import { withPrismHighlighter } from '@analogjs/content/prism-highlighter';
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ // ... other providers
+- provideContent(withMarkdownRenderer()),
++ provideContent(withMarkdownRenderer(), withPrismHighlighter()),
+ ],
+};
+```
+
+#### Using the `diff` Highlight Plugin
Analog supports highlighting diff changes with PrismJS. Add the `diff`
language and `diff-highlight` plugin imports to `app.config.ts`:
@@ -75,6 +90,110 @@ To highlight changed line backgrounds instead of just the text, add this import
@import 'prismjs/plugins/diff-highlight/prism-diff-highlight.css';
```
+### Shiki Syntax Highlighting
+
+Analog also supports syntax highlighting with Shiki. To enable syntax highlighting with `Shiki`, add `withShikiHighlighter()` to the `provideContent()` function in `app.config.ts`.
+
+```diff-ts
+import { ApplicationConfig } from '@angular/core';
+import { provideContent, withMarkdownRenderer } from '@analogjs/content';
++ import { withShikiHighlighter } from '@analogjs/content/shiki-highlighter';
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ // ... other providers
+- provideContent(withMarkdownRenderer()),
++ provideContent(withMarkdownRenderer(), withShikiHighlighter()),
+ ],
+};
+```
+
+#### Configure Shiki Highlighter
+
+> Please check out [Shiki Documentation](https://shiki.style/) for more information on configuring Shiki.
+
+To configure Shiki, you can pass a `WithShikiHighlighterOptions` object to the `withShikiHighlighter()` function.
+
+```ts
+import { withShikiHighlighter } from '@analogjs/content/shiki-highlighter';
+
+provideContent(
+ withMarkdownRenderer(),
+ withShikiHighlighter({
+ highlight: { theme: 'nord' },
+ })
+);
+```
+
+By default, `withShikiHighlighter` has the following options.
+
+```json
+{
+ "highlight": {
+ "themes": {
+ "dark": "github-dark",
+ "light": "github-light"
+ }
+ },
+ "highlighter": {
+ "langs": [
+ "json",
+ "ts",
+ "tsx",
+ "js",
+ "jsx",
+ "html",
+ "css",
+ "angular-html",
+ "angular-ts"
+ ],
+ "themes": ["github-dark", "github-light"]
+ }
+}
+```
+
+Provided options will be merged **shallowly**. For example:
+
+```ts
+import { withShikiHighlighter } from '@analogjs/content/shiki-highlighter';
+
+withShikiHighlighter({
+ highlighter: {
+ // langs will be provied by the default options
+ themes: ['ayu-dark'], // only ayu-dark will be bundled
+ },
+ highlight: {
+ theme: 'ayu-dark', // use ayu-dark as the theme
+ // theme: 'dark-plus' // ERROR: dark-plus is not bundled
+ },
+});
+```
+
+### Custom Syntax Highlighter
+
+If you want to use a custom syntax highlighter, you can use the `withHighlighter()` function to provide a custom highlighter.
+
+```ts
+import { withHighlighter, MarkedContentHighlighter } from '@analogjs/content';
+// NOTE: make sure to install 'marked-highlight' if not already installed
+import { markedHighlight } from 'marked-highlight';
+
+class CustomHighlighter extends MarkedContentHighlighter {
+ override getHighlightExtension() {
+ return markedHighlight({
+ highlight: (code, lang) => {
+ return 'your custom highlight';
+ },
+ });
+ }
+}
+
+provideContent(
+ withMarkdownRenderer(),
+ withHighlighter({ useClass: CustomHighlighter })
+);
+```
+
## Defining Content Files
For more flexibility, markdown content files can be provided in the `src/content` folder. Here you can list markdown files such as blog posts.
diff --git a/apps/ng-app/src/app/app.config.ts b/apps/ng-app/src/app/app.config.ts
index 1227d527c..8f46163f6 100644
--- a/apps/ng-app/src/app/app.config.ts
+++ b/apps/ng-app/src/app/app.config.ts
@@ -1,3 +1,4 @@
+import { withPrismHighlighter } from '@analogjs/content/prism-highlighter';
import { provideFileRouter } from '@analogjs/router';
import { provideHttpClient } from '@angular/common/http';
import { ApplicationConfig } from '@angular/core';
@@ -7,6 +8,10 @@ export const appConfig: ApplicationConfig = {
providers: [
provideFileRouter(),
provideHttpClient(),
- provideContent(withMarkdownRenderer()),
+ provideContent(
+ withMarkdownRenderer(),
+ // NOTE: .agx files are not affected by the highlighter yet.
+ withPrismHighlighter()
+ ),
],
};
diff --git a/apps/ng-app/src/styles.css b/apps/ng-app/src/styles.css
index 5666addb9..aeb0531d3 100644
--- a/apps/ng-app/src/styles.css
+++ b/apps/ng-app/src/styles.css
@@ -2,4 +2,4 @@
/* include CSS for prism toolbar */
@import 'prismjs/plugins/toolbar/prism-toolbar.css';
/* check node_modules/prismjs/themes/ for the available themes */
-@import 'prismjs/themes/prism-tomorrow';
+@import 'prismjs/themes/prism-tomorrow.css';
diff --git a/nx.json b/nx.json
index d5ad38f62..877817338 100644
--- a/nx.json
+++ b/nx.json
@@ -36,6 +36,11 @@
"@nx/eslint:lint": {
"inputs": ["default", "{workspaceRoot}/.eslintrc.json"],
"cache": true
+ },
+ "@nx/js:tsc": {
+ "cache": true,
+ "dependsOn": ["^build"],
+ "inputs": ["production", "^production"]
}
},
"generators": {
diff --git a/package.json b/package.json
index 24f9094d4..b410712a5 100644
--- a/package.json
+++ b/package.json
@@ -40,9 +40,6 @@
"url": "https://github.com/analogjs/analog.git"
},
"private": true,
- "workspaces": [
- "apps/docs-app"
- ],
"dependencies": {
"@angular/animations": "^18.0.0",
"@angular/cdk": "^18.0.0",
@@ -83,8 +80,8 @@
"zone.js": "^0.14.0"
},
"devDependencies": {
- "@angular-devkit/build-angular": "^18.0.0",
"@angular-devkit/architect": "^0.1800.0",
+ "@angular-devkit/build-angular": "^18.0.0",
"@angular-devkit/core": "^18.0.0",
"@angular-devkit/schematics": "^18.0.0",
"@angular-eslint/eslint-plugin": "17.3.0",
@@ -145,6 +142,8 @@
"jsonc-eslint-parser": "^2.1.0",
"kolorist": "^1.6.0",
"lint-staged": "^13.1.0",
+ "marked-mangle": "^1.1.7",
+ "marked-shiki": "^1.1.0",
"minimist": "^1.2.7",
"ng-packagr": "^18.0.0",
"nitropack": "^2.9.0",
@@ -160,6 +159,7 @@
"rollup-plugin-visualizer": "^5.9.0",
"semantic-release": "^22.0.7",
"semantic-release-replace-plugin": "^1.2.7",
+ "shiki": "^1.6.1",
"start-server-and-test": "^1.15.4",
"tailwindcss": "^3.0.2",
"ts-jest": "29.1.0",
diff --git a/packages/content-plugin/.eslintrc.json b/packages/content-plugin/.eslintrc.json
new file mode 100644
index 000000000..3043de595
--- /dev/null
+++ b/packages/content-plugin/.eslintrc.json
@@ -0,0 +1,32 @@
+{
+ "extends": ["../../.eslintrc.json"],
+ "ignorePatterns": ["!**/*"],
+ "overrides": [
+ {
+ "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+ "rules": {}
+ },
+ {
+ "files": ["*.ts", "*.tsx"],
+ "rules": {}
+ },
+ {
+ "files": ["*.js", "*.jsx"],
+ "rules": {}
+ },
+ {
+ "files": ["*.json"],
+ "parser": "jsonc-eslint-parser",
+ "rules": {
+ "@nx/dependency-checks": "error"
+ }
+ },
+ {
+ "files": ["./package.json", "./migrations.json"],
+ "parser": "jsonc-eslint-parser",
+ "rules": {
+ "@nx/nx-plugin-checks": "error"
+ }
+ }
+ ]
+}
diff --git a/packages/content-plugin/README.md b/packages/content-plugin/README.md
new file mode 100644
index 000000000..273c0d3fd
--- /dev/null
+++ b/packages/content-plugin/README.md
@@ -0,0 +1,11 @@
+# content-plugin
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build content-plugin` to build the library.
+
+## Running unit tests
+
+Run `nx test content-plugin` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/packages/content/migrations/migration.json b/packages/content-plugin/migrations.json
similarity index 55%
rename from packages/content/migrations/migration.json
rename to packages/content-plugin/migrations.json
index a815f2905..dff96be49 100644
--- a/packages/content/migrations/migration.json
+++ b/packages/content-plugin/migrations.json
@@ -1,6 +1,18 @@
{
- "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
- "schematics": {},
+ "generators": {
+ "update-markdown-renderer-feature": {
+ "version": "1.5.0-beta.1",
+ "description": "Update withMarkdownRenderer feature with withPrismHighlighter",
+ "implementation": "./src/migrations/update-markdown-renderer-feature/update-markdown-renderer-feature"
+ }
+ },
+ "schematics": {
+ "update-markdown-renderer-feature": {
+ "version": "1.5.0-beta.1",
+ "description": "Update withMarkdownRenderer feature with withPrismHighlighter",
+ "factory": "./src/migrations/update-markdown-renderer-feature/compat"
+ }
+ },
"packageJsonUpdates": {
"0.2.0-beta.23": {
"version": "0.2.0-beta.19",
@@ -38,6 +50,16 @@
"alwaysAddToPackageJson": true
}
}
+ },
+ "1.5.0-beta.1": {
+ "version": "1.4.0",
+ "description": "Adds marked-mangle dependency for deprecated marked feature",
+ "packages": {
+ "marked-mangle": {
+ "version": "^1.1.7",
+ "alwaysAddToPackageJson": true
+ }
+ }
}
}
}
diff --git a/packages/content-plugin/package.json b/packages/content-plugin/package.json
new file mode 100644
index 000000000..d9819d58c
--- /dev/null
+++ b/packages/content-plugin/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "content-plugin",
+ "version": "0.0.1",
+ "main": "./src/index.js"
+}
diff --git a/packages/content-plugin/project.json b/packages/content-plugin/project.json
new file mode 100644
index 000000000..340bd699c
--- /dev/null
+++ b/packages/content-plugin/project.json
@@ -0,0 +1,52 @@
+{
+ "name": "content-plugin",
+ "$schema": "../../node_modules/nx/schemas/project-schema.json",
+ "sourceRoot": "packages/content-plugin/src",
+ "projectType": "library",
+ "tags": [],
+ "targets": {
+ "build": {
+ "executor": "@nx/js:tsc",
+ "outputs": ["{options.outputPath}"],
+ "options": {
+ "outputPath": "node_modules/@analogjs/content/plugin",
+ "main": "packages/content-plugin/src/index.ts",
+ "tsConfig": "packages/content-plugin/tsconfig.lib.json",
+ "assets": [
+ "packages/content-plugin/*.md",
+ {
+ "input": "./packages/content-plugin/src",
+ "glob": "**/!(*.ts)",
+ "output": "./src"
+ },
+ {
+ "input": "./packages/content-plugin/src",
+ "glob": "**/*.d.ts",
+ "output": "./src"
+ },
+ {
+ "input": "./packages/content-plugin",
+ "glob": "generators.json",
+ "output": "."
+ },
+ {
+ "input": "./packages/content-plugin",
+ "glob": "executors.json",
+ "output": "."
+ },
+ {
+ "input": "./packages/content-plugin",
+ "glob": "migrations.json",
+ "output": "."
+ }
+ ]
+ }
+ },
+ "lint": {
+ "executor": "@nx/eslint:lint"
+ },
+ "test": {
+ "executor": "@nx/vite:test"
+ }
+ }
+}
diff --git a/packages/content-plugin/src/index.ts b/packages/content-plugin/src/index.ts
new file mode 100644
index 000000000..27160f844
--- /dev/null
+++ b/packages/content-plugin/src/index.ts
@@ -0,0 +1 @@
+export default void 0;
diff --git a/packages/content-plugin/src/migrations/update-markdown-renderer-feature/compat.ts b/packages/content-plugin/src/migrations/update-markdown-renderer-feature/compat.ts
new file mode 100644
index 000000000..0c2f91565
--- /dev/null
+++ b/packages/content-plugin/src/migrations/update-markdown-renderer-feature/compat.ts
@@ -0,0 +1,4 @@
+import { convertNxGenerator } from '@nx/devkit';
+import updateMarkdownRendererFeature from './update-markdown-renderer-feature';
+
+export default convertNxGenerator(updateMarkdownRendererFeature);
diff --git a/packages/content-plugin/src/migrations/update-markdown-renderer-feature/update-markdown-renderer-feature.spec.ts b/packages/content-plugin/src/migrations/update-markdown-renderer-feature/update-markdown-renderer-feature.spec.ts
new file mode 100644
index 000000000..13cd4b4d9
--- /dev/null
+++ b/packages/content-plugin/src/migrations/update-markdown-renderer-feature/update-markdown-renderer-feature.spec.ts
@@ -0,0 +1,57 @@
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import { addDependenciesToPackageJson, Tree } from '@nx/devkit';
+import { nxVersion } from '@nx/vite';
+
+import update from './update-markdown-renderer-feature';
+import appGenerator from '../../../../nx-plugin/src/generators/app/generator';
+
+describe('update-markdown-renderer-feature migration', () => {
+ let tree: Tree;
+
+ beforeEach(() => {});
+
+ async function setup() {
+ tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+
+ addDependenciesToPackageJson(tree, {}, { nx: nxVersion });
+
+ await appGenerator(tree, {
+ analogAppName: 'my-app',
+ addTRPC: false,
+ addTailwind: false,
+ skipFormat: true,
+ });
+
+ tree.write(
+ 'apps/my-app/src/app/app.config.ts',
+ `import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideHttpClient, withFetch } from '@angular/common/http';
+import { provideClientHydration } from '@angular/platform-browser';
+import { provideFileRouter } from '@analogjs/router';
+import { provideContent, withMarkdownRenderer } from '@analogjs/content';
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ provideZoneChangeDetection({ eventCoalescing: true }),
+ provideFileRouter(),
+ provideClientHydration(),
+ provideHttpClient(withFetch()),
+ provideContent(
+ withMarkdownRenderer()
+ )
+ ],
+};`
+ );
+ }
+
+ it('should add withPrismHighlighter', async () => {
+ await setup();
+ await update(tree);
+ const configContent = tree.read(
+ 'apps/my-app/src/app/app.config.ts',
+ 'utf-8'
+ );
+ expect(configContent).toContain('withPrismHighlighter()');
+ expect(configContent).toContain('@analogjs/content/prism-highlighter');
+ });
+});
diff --git a/packages/content-plugin/src/migrations/update-markdown-renderer-feature/update-markdown-renderer-feature.ts b/packages/content-plugin/src/migrations/update-markdown-renderer-feature/update-markdown-renderer-feature.ts
new file mode 100644
index 000000000..d5ea33eef
--- /dev/null
+++ b/packages/content-plugin/src/migrations/update-markdown-renderer-feature/update-markdown-renderer-feature.ts
@@ -0,0 +1,48 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { formatFiles, Tree, visitNotIgnoredFiles } from '@nx/devkit';
+import { CallExpression, Node, Project } from 'ts-morph';
+
+export default async function update(host: Tree) {
+ let project: Project;
+
+ visitNotIgnoredFiles(host, '/', (file) => {
+ if (file.endsWith('.ts')) {
+ const content = host.read(file, 'utf-8');
+ if (
+ content &&
+ content.includes('withMarkdownRenderer') &&
+ !content.includes('withPrismHighlighter') &&
+ !content.includes('withShikiHighlighter')
+ ) {
+ if (!project) {
+ project = new Project({
+ useInMemoryFileSystem: true,
+ skipAddingFilesFromTsConfig: true,
+ });
+ }
+
+ const sourceFile = project.createSourceFile(file, content);
+
+ const provideContentNode = sourceFile.getFirstDescendant(
+ (node): node is CallExpression =>
+ Node.isCallExpression(node) &&
+ node.getText().includes('provideContent') &&
+ node.getText().includes('withMarkdownRenderer')
+ );
+
+ if (provideContentNode) {
+ sourceFile.addImportDeclaration({
+ moduleSpecifier: '@analogjs/content/prism-highlighter',
+ namedImports: ['withPrismHighlighter'],
+ });
+
+ provideContentNode.addArgument('withPrismHighlighter()');
+ }
+
+ host.write(file, sourceFile.getFullText());
+ }
+ }
+ });
+
+ await formatFiles(host);
+}
diff --git a/packages/content-plugin/tsconfig.json b/packages/content-plugin/tsconfig.json
new file mode 100644
index 000000000..19b9eece4
--- /dev/null
+++ b/packages/content-plugin/tsconfig.json
@@ -0,0 +1,16 @@
+{
+ "extends": "../../tsconfig.base.json",
+ "compilerOptions": {
+ "module": "commonjs"
+ },
+ "files": [],
+ "include": [],
+ "references": [
+ {
+ "path": "./tsconfig.lib.json"
+ },
+ {
+ "path": "./tsconfig.spec.json"
+ }
+ ]
+}
diff --git a/packages/content-plugin/tsconfig.lib.json b/packages/content-plugin/tsconfig.lib.json
new file mode 100644
index 000000000..faa09cc18
--- /dev/null
+++ b/packages/content-plugin/tsconfig.lib.json
@@ -0,0 +1,10 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../../dist/out-tsc",
+ "declaration": true,
+ "types": ["node"]
+ },
+ "include": ["src/**/*.ts"],
+ "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/packages/content-plugin/tsconfig.spec.json b/packages/content-plugin/tsconfig.spec.json
new file mode 100644
index 000000000..0cb93bd6e
--- /dev/null
+++ b/packages/content-plugin/tsconfig.spec.json
@@ -0,0 +1,14 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../../dist/out-tsc",
+ "module": "commonjs",
+ "types": ["jest", "node"]
+ },
+ "include": ["src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"],
+ "exclude": [
+ "src/**/files/**/*.test.ts",
+ "src/**/files/**/*.spec.ts",
+ "src/**/files/**/*.d.ts"
+ ]
+}
diff --git a/packages/content-plugin/vite.config.ts b/packages/content-plugin/vite.config.ts
new file mode 100644
index 000000000..f89116bfd
--- /dev/null
+++ b/packages/content-plugin/vite.config.ts
@@ -0,0 +1,22 @@
+/// '
+ );
+
+ testCode = "```diff-typescript\nconsole.log('Hello, world!');\n```";
+ result = await service.render(testCode);
+
+ expect(result).toContain(
+ ''
+ );
+ });
+
+ it('render should fall back to language-only highlighting if `diff` plugin is not imported', async () => {
+ const { service } = setup();
+ delete window.Prism.languages['diff'];
+ let testCode = "```diff-javascript\nconsole.log('Hello, world!');\n```";
+ let result = await service.render(testCode);
+
+ expect(result).toContain(
+ ''
+ );
+
+ testCode = "```diff-typescript\nconsole.log('Hello, world!');\n```";
+ result = await service.render(testCode);
+
+ expect(result).toContain(
+ ''
+ );
+ });
+});
diff --git a/packages/content/prism-highlighter/src/lib/prism-highlighter.ts b/packages/content/prism-highlighter/src/lib/prism-highlighter.ts
new file mode 100644
index 000000000..feb20bc48
--- /dev/null
+++ b/packages/content/prism-highlighter/src/lib/prism-highlighter.ts
@@ -0,0 +1,67 @@
+import { MarkedContentHighlighter } from '@analogjs/content';
+import { Injectable } from '@angular/core';
+import { markedHighlight } from 'marked-highlight';
+
+import 'prismjs';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard';
+import 'prismjs/plugins/toolbar/prism-toolbar';
+import './prism/angular';
+
+declare const Prism: typeof import('prismjs');
+
+@Injectable()
+export class PrismHighlighter extends MarkedContentHighlighter {
+ override augmentCodeBlock(code: string, lang: string): string {
+ const classes =
+ lang.startsWith('diff') && Prism.languages['diff']
+ ? `language-${lang} diff-highlight`
+ : `language-${lang.replace('diff-', '')}`;
+ return `${code} & {
+ additionalLangs?: BundledLanguage[];
+ };
+ highlight?: ShikiHighlightOptions;
+ container?: string;
+}
+
+export function withShikiHighlighter({
+ highlighter = {},
+ highlight = {},
+ container = '%s',
+}: WithShikiHighlighterOptions = {}): Provider {
+ if (!highlighter.themes) {
+ if (highlight.theme) {
+ highlighter.themes = [highlight.theme];
+ } else if (highlight.themes && typeof highlight.themes === 'object') {
+ highlighter.themes = Object.values(highlight.themes) as string[];
+ } else {
+ highlighter.themes = defaultHighlighterOptions.themes;
+ }
+ }
+
+ if (!highlighter.langs) {
+ highlighter.langs = defaultHighlighterOptions.langs;
+ }
+
+ if (highlighter.additionalLangs) {
+ highlighter.langs.push(...highlighter.additionalLangs);
+ delete highlighter.additionalLangs;
+ }
+
+ return [
+ { provide: SHIKI_HIGHLIGHTER_OPTIONS, useValue: highlighter },
+ { provide: SHIKI_HIGHLIGHT_OPTIONS, useValue: highlight },
+ { provide: SHIKI_CONTAINER_OPTION, useValue: container },
+ withHighlighter({ useClass: ShikiHighlighter }),
+ ];
+}
diff --git a/packages/content/shiki-highlighter/src/lib/shiki-highlighter.spec.ts b/packages/content/shiki-highlighter/src/lib/shiki-highlighter.spec.ts
new file mode 100644
index 000000000..0e70d0027
--- /dev/null
+++ b/packages/content/shiki-highlighter/src/lib/shiki-highlighter.spec.ts
@@ -0,0 +1,30 @@
+import {
+ MarkdownContentRendererService,
+ MarkedSetupService,
+} from '@analogjs/content';
+import { withShikiHighlighter } from '../index';
+import { TestBed } from '@angular/core/testing';
+
+describe('ShikiHighlighter', () => {
+ function setup() {
+ TestBed.configureTestingModule({
+ providers: [
+ MarkdownContentRendererService,
+ MarkedSetupService,
+ withShikiHighlighter(),
+ ],
+ });
+ return { service: TestBed.inject(MarkdownContentRendererService) };
+ }
+
+ it('render should correctly highlight code blocks with shiki', async () => {
+ const { service } = setup();
+
+ const testCode =
+ '```angular-ts\n@Component({\ntemplate: `Hello, world! `\n})\nexport class MyCmp {}\n```';
+ const result = await service.render(testCode);
+ expect(result).toContain(
+ '[0];
+export type ShikiHighlightOptions = Partial<
+ Omit, 'lang'>
+> &
+ CodeOptionsMeta &
+ Partial> &
+ Partial>;
+
+export const defaultHighlighterOptions = {
+ langs: [
+ 'json',
+ 'ts',
+ 'tsx',
+ 'js',
+ 'jsx',
+ 'html',
+ 'css',
+ 'angular-html',
+ 'angular-ts',
+ ],
+ themes: ['github-dark', 'github-light'],
+};
+
+export const [
+ SHIKI_HIGHLIGHTER_OPTIONS,
+ SHIKI_HIGHLIGHT_OPTIONS,
+ SHIKI_CONTAINER_OPTION,
+] = [
+ new InjectionToken('SHIKI_HIGHLIGHTER_OPTIONS'),
+ new InjectionToken('SHIKI_HIGHLIGHT_OPTIONS'),
+ new InjectionToken('SHIKI_CONTAINER_OPTION'),
+];
+
+@Injectable()
+export class ShikiHighlighter extends MarkedContentHighlighter {
+ private readonly highlighterOptions = inject(SHIKI_HIGHLIGHTER_OPTIONS);
+ private readonly highlightOptions = inject(SHIKI_HIGHLIGHT_OPTIONS);
+ private readonly highlighterContainer = inject(SHIKI_CONTAINER_OPTION);
+ private readonly hasLoadMermaid = inject(MERMAID_IMPORT_TOKEN, {
+ optional: true,
+ });
+ private readonly highlighter = getHighlighter(this.highlighterOptions);
+
+ override getHighlightExtension() {
+ return markedShiki({
+ container: this.highlighterContainer,
+ highlight: async (code, lang, props) => {
+ if (this.hasLoadMermaid && lang === 'mermaid') {
+ return `${code} `;
+ }
+
+ const { codeToHtml } = await this.highlighter;
+ return codeToHtml(
+ code,
+ Object.assign(
+ {
+ lang,
+ // required by `transformerMeta*`
+ meta: { __raw: props.join(' ') },
+ themes: { dark: 'github-dark', light: 'github-light' },
+ },
+ this.highlightOptions
+ )
+ );
+ },
+ });
+ }
+}
diff --git a/packages/content/src/index.ts b/packages/content/src/index.ts
index c2abd4eb4..00d9d5808 100644
--- a/packages/content/src/index.ts
+++ b/packages/content/src/index.ts
@@ -7,8 +7,13 @@ export {
MarkdownContentRendererService,
provideContent,
withMarkdownRenderer,
+ MERMAID_IMPORT_TOKEN,
} from './lib/markdown-content-renderer.service';
export { default as MarkdownRouteComponent } from './lib/markdown-route.component';
export { default as MarkdownComponent } from './lib/markdown.component';
export { parseRawContentFile } from './lib/parse-raw-content-file';
export { MarkedSetupService } from './lib/marked-setup.service';
+export {
+ MarkedContentHighlighter,
+ withHighlighter,
+} from './lib/marked-content-highlighter';
diff --git a/packages/content/src/lib/markdown-content-renderer.service.spec.ts b/packages/content/src/lib/markdown-content-renderer.service.spec.ts
index 7c8cf1dc1..e91f2b4b6 100644
--- a/packages/content/src/lib/markdown-content-renderer.service.spec.ts
+++ b/packages/content/src/lib/markdown-content-renderer.service.spec.ts
@@ -20,10 +20,10 @@ describe('MarkdownContentRendererService', () => {
it('should transform markdown and return a TOC', async () => {
const { service } = setup();
const content = `
-# Level 1
+# Level 1
## Level 2
-lorem ipsum ....
+lorem ipsum ....
# Level 1
## Level 2
@@ -63,40 +63,4 @@ Lorem ipsum 2....
''
);
});
-
- it('render should correctly highlight diff code blocks', async () => {
- const { service } = setup();
- window.Prism.languages['diff'] = {};
- let testCode = "```diff-javascript\nconsole.log('Hello, world!');\n```";
- let result = await service.render(testCode);
-
- expect(result).toContain(
- ''
- );
-
- testCode = "```diff-typescript\nconsole.log('Hello, world!');\n```";
- result = await service.render(testCode);
-
- expect(result).toContain(
- ''
- );
- });
-
- it('render should fall back to language-only highlighting if `diff` plugin is not imported', async () => {
- const { service } = setup();
- window.Prism.languages['diff'] = undefined;
- let testCode = "```diff-javascript\nconsole.log('Hello, world!');\n```";
- let result = await service.render(testCode);
-
- expect(result).toContain(
- ''
- );
-
- testCode = "```diff-typescript\nconsole.log('Hello, world!');\n```";
- result = await service.render(testCode);
-
- expect(result).toContain(
- ''
- );
- });
});
diff --git a/packages/content/src/lib/marked-content-highlighter.ts b/packages/content/src/lib/marked-content-highlighter.ts
new file mode 100644
index 000000000..d0f1be88b
--- /dev/null
+++ b/packages/content/src/lib/marked-content-highlighter.ts
@@ -0,0 +1,30 @@
+import {
+ AbstractType,
+ Injectable,
+ Provider,
+ ProviderToken,
+ Type,
+} from '@angular/core';
+
+export interface MarkedContentHighlighter {
+ augmentCodeBlock?(code: string, lang: string): string;
+}
+
+@Injectable()
+export abstract class MarkedContentHighlighter {
+ abstract getHighlightExtension(): import('marked').marked.MarkedExtension;
+}
+
+export function withHighlighter(
+ provider: (
+ | { useValue: MarkedContentHighlighter }
+ | {
+ useClass:
+ | Type
+ | AbstractType;
+ }
+ | { useFactory: (...deps: any[]) => MarkedContentHighlighter }
+ ) & { deps?: ProviderToken[] }
+): Provider {
+ return { provide: MarkedContentHighlighter, ...provider } as Provider;
+}
diff --git a/packages/content/src/lib/marked-setup.service.ts b/packages/content/src/lib/marked-setup.service.ts
index 2a2d52838..21249d836 100644
--- a/packages/content/src/lib/marked-setup.service.ts
+++ b/packages/content/src/lib/marked-setup.service.ts
@@ -2,27 +2,18 @@
* Credit goes to Scully for original implementation
* https://github.com/scullyio/scully/blob/main/libs/scully/src/lib/fileHanderPlugins/markdown.ts
*/
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
import { marked } from 'marked';
import { gfmHeadingId } from 'marked-gfm-heading-id';
-import { markedHighlight } from 'marked-highlight';
-
-import 'prismjs';
-import 'prismjs/components/prism-bash';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-json';
-import 'prismjs/components/prism-markup';
-import 'prismjs/components/prism-typescript';
-import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard';
-import 'prismjs/plugins/toolbar/prism-toolbar';
-import './prism/angular';
-
-declare const Prism: typeof import('prismjs');
+import { mangle } from 'marked-mangle';
+import { MarkedContentHighlighter } from './marked-content-highlighter';
@Injectable()
export class MarkedSetupService {
private readonly marked: typeof marked;
+ private readonly highlighter = inject(MarkedContentHighlighter, {
+ optional: true,
+ });
constructor() {
const renderer = new marked.Renderer();
@@ -37,63 +28,25 @@ export class MarkedSetupService {
return '' + code + '${code}${code}