How to use line-number plugin with webpack

I hava code link this. But it not show line number

const Prism = require('prismjs/components/prism-core.js');
require('prismjs/plugins/line-numbers/prism-line-numbers.js');
require('prismjs/themes/prism.css');
require('prismjs/components/prism-javascript');
const code = 'var a = 1;';

render() {
    <pre className="line-numbers" data-start="0">
        <code className="language-javascript" dangerouslySetInnerHTML={{ __html: code }} />
    </pre>
}

[tonix-tuft]

@mAAdhaTTah Awesome man! It works, thanks here is the complete working code:

import React, { useEffect } from "react";
import Prism from "prismjs";
import "../../node_modules/prism-themes/themes/prism-vsc-dark-plus.css";
import { compose } from "js-utl";
import { classNames } from "react-js-utl/utils";
import { useUniqueKey } from "react-js-utl/hooks";
import "prismjs/plugins/line-numbers/prism-line-numbers";
import "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css";

const PrismCode = compose(React.memo)(function PrismCode({
  className = void 0,
  codeClassName = void 0,
  children,
  withLineNumbers = true,
} = {}) {
  const id = useUniqueKey();

  useEffect(() => {
    Prism.highlightAllUnder(document.getElementById(id));
  }, [id, children]);

  return (
    <div id={id} className={classNames("prism-code", className)}>
      <pre
        className={classNames(codeClassName, withLineNumbers && "line-numbers")}
      >
        <code className={codeClassName}>{children}</code>
      </pre>
    </div>
  );
});
PrismCode.displayName = "PrismCode";
export default PrismCode;

[Yee1014]

In Vue.js Components

<template>
      <div>
        <pre class="line-numbers language-markup"><code v-html="codeData"></code></pre>
      </div>
</template>

<script>
import Prism from 'prismjs'
import 'prismjs/plugins/line-numbers/prism-line-numbers.js'
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
import 'prismjs/themes/prism-tomorrow.css'

export default {
 data () {
    return {
      codeData: '',
    }
  },
 methods: {
    /**
     * show highlight code
     * @param {string} data
     */
 showCode (data) {
      this.codeData = data
      this.codeData = Prism.highlight(data, Prism.languages.markup)
      // key code
      this.$nextTick(() => {
        Prism.highlightAll()
      })
    }
}
}

ReView

Others

babel-plugin-prismjs, i don’t know it how to work?😂