xdm VS babel-plugin-prismjs

Here is link number 1 - Previous text "XDM"

To make it easy to configure your Prism instance with only the languages and plugins you need, use the babel plugin, babel-plugin-prismjs. This will allow you to load the minimum number of languages and plugins to satisfy your needs. See that plugin's documentation for configuration details.

As mentioned the frameworks have gone through some changes since then. Babel is hardly ever used these days, esbuild doesn't pick up the babel config automatically. If you're using the default esbuild config generated with a modern phx_new version, look into changing it to a custom build script in https://hexdocs.pm/phoenix/asset_management.html#esbuild-plugins and then integrate something like this plugin https://github.com/nativew/esbuild-plugin-babel to be able to run https://github.com/mAAdhaTTah/babel-plugin-prismjs. There is a comment at the bottom of the tutorial of someone getting it to work with live view by listening for a phx page loading event, but the more idiomatic way these days would be to use a hook.

And here's the babel plugin I would like to add in my project which recommend to register in the babelrc file.

There are a couple of choices to bring it into your project. If you're already using a JS Bundler (e.g. esbuild or Webpack) you can setup the Babel Plugin for Prism. For our demonstration we'll do this the old, simple way, writing our HTML tags directly.

For the babel plugin see: https://github.com/mAAdhaTTah/babel-plugin-prismjs

code uses Prims.js and babel-plugin-prismjs to highlight code syntax. languages you specify here the languages you want to apply syntax highlighting, by default only javascript is enabled.