How to render youtube, twitter etc... in the markdown ?

[hlassiege]

Hi,

I noticed that it was possible to add remark plugins in order to enhance the behaviour of nuxt-content.

However I'm not sure how to make it work.

I added the following plugin remark-oembed in basePlugins :

  basePlugins: ['remark-squeeze-paragraphs', 'remark-slug', 'remark-autolink-headings', 'remark-external-links', 'remark-footnotes',
    '@agentofuser/remark-oembed'],

I also tried with remarkPlugins and plugins in a markdown file, I have for example :

https://www.youtube.com/watch?v=7Pq-S557XQU

However it seems the rendering don't use the plugin and the link stays unchanged.

Maybe there is another plugin to do that ? Do you know if there is something specific to make it work ?

[Tahul]

Hello @hlassiege :)

Could you specify which version of @nuxt/content are you using and provide a reproduction please?

Thanks a lot! 🙏

[hlassiege]

Hi,

Version of nuxt/content and remark-oembed are as follows:

"dependencies": {
    "@agentofuser/remark-oembed": "^1.0.4",
    "@nuxt/content": "^1.15.1",

It is possible to reproduce from this repository : https://github.com/hlassiege/eventuallycoding

nuxt generate

go to this page : http://localhost:3000/2022/04/14/integration-et-dev-web-avec-bulma-vue-js-etc-coderwatch-episode-3

There is a youtube video link

[farnabaz]

@hlassiege You also need to register your custom plugins under markdown.remarkPlugins in nuxt.config.

  content: {
    liveEdit: false,
    markdown: {
      remarkPlugins: [
        '@agentofuser/remark-oembed'
      ],
      prism: {
        theme: "prism-themes/themes/prism-dracula.css",
      },
    },
  },

[hlassiege]

Yes I did that but it didn't work. I tried in remarkPlugin, plugins and markdownPlugins as stated in the documentation. But I found another solution without remark plugins. Now it's directly transformed on client side with javascript. (See https://github.com/hlassiege/eventuallycoding/blob/master/pages/_.vue#L222)

[farnabaz]

Seems that @agentofuser/remark-oembed did not update since long time it does not export transformer properly. Consider using alternative plugins like remark-oembed which is clone of @agentofuser/remark-oembed

! Using remark-oembed you might need to add some styles, it does not provide any styling

[TechWatching]

Any up-to-date alternative? What are you using on your websites?

[hlassiege]

Any up-to-date alternative? What are you using on your websites?

Hi, If the question is for me, I use a custom solution as described here :

https://github.com/nuxt/content/issues/1046#issuecomment-1133830963