Markdown not working after upgrade to 1.6.0 about analog

[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]

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.

[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.