Markdown not working after upgrade to 1.6.0

[alexcibotari]

Please provide the environment you discovered this bug in.

I have a working application on version Angular 18 and Analog 1.4.0.
After upgrading Analog to version 1.6.0 markdown content is not rendered anymore.

Which area/package is the issue in?

content

Description

I have a working application on version Angular 18 and Analog 1.4.0.
After upgrading Analog to version 1.6.0 markdown content is not rendered anymore.

Please provide the exception or error you saw

markdown is rendered as simple text.
Are there any additional instructions to upgrade from v1.4 to v1.6 ?
My content is not located in the project file, it is fetched remotely from Localess via API.

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[brandonroberts]

I see, so you're just using the markdown component with loading your own content. You can try adding this to your bootstrap providers in the app.config.ts

// ... other imports
import { ContentRenderer, MarkdownContentRendererService } from '@analogjs/content';

export const appConfig: ApplicationConfig = {
  providers: [
    // ... other providers
    provideContent(
      withMarkdownRenderer({
        loadMermaid: () => import('mermaid'),
      }),
      withPrismHighlighter()
    ),
    { provide: ContentRenderer, useClass: MarkdownContentRendererService }
  ],
};

[alexcibotari]

Now it works

Only the code highlighter is not working ))

[brandonroberts]

Add these imports to your app.config.ts

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';

[alexcibotari]

I think make sens to add it into instructions, otherwise it is confusing how to integrate with syntax highlights .

Same for providers, make sense to add it to content providers, what is the sens to initiate content provider and separately markdown service

[brandonroberts]

@alexcibotari In 1.6, we introduced build-time markdown rendering and syntax highlighting, so it doesn't need to be done client-side.

If you were using injectContent and not pulling from a CMS, it works just the same without the manual imports.

We can add some instructions for those who want to do rendering/syntax highlighting client-side.

[alexcibotari]

As I statically generate my site, I want them to be generated during build time also, not on client side. At the moment I can achieve it only with server page. Is there any other way you will suggest to deal with static generation of content from headless CMS ?

[brandonroberts]

As I statically generate my site, I want them to be generated during build time also, not on client side. At the moment I can achieve it only with server page. Is there any other way you will suggest to deal with static generation of content from headless CMS ?

Yes, we can add some guidance on using a headless CMS. Do you have an example repo using a headless CMS?

[alexcibotari]

I can add you to one of my repositories for a website with Headless CMS integration. Also, based on your guidance I can create a public example to share with everyone.

[brandonroberts]

👍

[alexcibotari]

Done. I wrote an email, just in case it will require me to share some private information.

[alexcibotari]

I found out that without adding MarkedSetupService in providers it will not work.

At the same time, the UI is flickering after refresh

You can check it here : https://localess.org/docs/sdk/typescript

[brandonroberts]

@alexcibotari I released a patch version with a fix for the flickering 1.6.2-beta.2. You can set up these providers for client side rendering and syntax highlighting.

  providers: [
    MarkedSetupService,
    provideContent(
      withMarkdownRenderer({
        loadMermaid: () => import('mermaid'),
      }),
      withHighlighter({ useClass: PrismHighlighter })
    ),
    {provide: ContentRenderer, useClass: MarkdownContentRendererService},
  ]

[alexcibotari]

@brandonroberts Thank you, the flickering is fixed.