Content Routes
Analog also supports using markdown content as routes, and rendering markdown content in components.
Setup
In the src/app/app.config.ts
, add the provideContent()
function, along with the withMarkdownRenderer()
feature to the providers
array when bootstrapping the application.
import { ApplicationConfig } from '@angular/core';
import { provideContent, withMarkdownRenderer } from '@analogjs/content';
export const appConfig: ApplicationConfig = {
providers: [
// ... other providers
provideContent(withMarkdownRenderer()),
],
};
Defining Content Routes
Content routes include support for frontmatter, metatags, and syntax highlighting with PrismJS.
The example route below in src/app/pages/about.md
defines an /about
route.
---
title: About
meta:
- name: description
content: About Page Description
- property: og:title
content: About
---
## About Analog
Analog is a meta-framework for Angular.
[Back Home](./)
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
:
import 'prismjs/components/prism-diff';
import 'prismjs/plugins/diff-highlight/prism-diff-highlight';
Use the diff
language tag to highlight them or
diff-<language>
to highlight the diff changes in a specific language.
```diff
- This is a sentence.
+ This is a longer sentence.
```
```diff-typescript
- const foo = 'bar';
+ const foo = 'baz';
```
To highlight changed line backgrounds instead of just the text, add this import to your global stylesheet:
@import 'prismjs/plugins/diff-highlight/prism-diff-highlight.css';