How to use the prismjs/components.languages function in prismjs

import COMPONENTS from 'prismjs/components';

const LANGUAGES = { ...COMPONENTS.languages };
delete LANGUAGES.meta;

// Mainstream and commonly used components.
// According to some arbitrary beliefs.
const COMMON = [
    'aspnet',
    'bash',
    'c',
    'clike',
    'coffeescript',
    'cpp',
    'csharp',
    'css',
    'd',
    'dart',
    'diff',

export default function loadPrismLanguage(language) {
  const baseLanguage = getBaseLanguageName(language)

  if (!baseLanguage) {
    throw new Error(`Prism doesn't support language '${language}'.`)
  }

  if (Prism.languages[baseLanguage]) {
    // Don't load already loaded language
    return
  }

  const languageData = prismComponents.languages[baseLanguage]

  if (languageData.option === `default`) {
    // Default language has already been loaded by Prism
    return
  }

  if (languageData.require) {
    // Load the required language first
    if (Array.isArray(languageData.require)) {
      languageData.require.forEach(loadPrismLanguage)
    } else {
      loadPrismLanguage(languageData.require)
    }
  }

  require(`prismjs/components/prism-${baseLanguage}.js`)

'use strict';

const Prism = require('prismjs');
const prismLoadLanguages = require('prismjs/components/');

// https://github.com/PrismJS/prism/issues/2145
const prismComponents = require('prismjs/components');
const prismSupportedLanguages = Object.keys(prismComponents.languages);

const escapeHTML = require('./escape_html');

/**
 * Wrapper of Prism.highlight()
 * @param {String} code
 * @param {String} language
 */
function prismHighlight(code, language) {
  // Prism has not load the language pattern
  if (!Prism.languages[language] && prismSupportedLanguages.includes(language)) prismLoadLanguages(language);

  if (Prism.languages[language]) {
    // Prism escapes output by default
    return Prism.highlight(code, Prism.languages[language], language);
  }

ngAfterContentInit() {
    this.eltRef.nativeElement.innerHTML = Prism.highlight(this.content, Languages.languages[this.language]);
  }
}

const PEERS = Object.keys(LANGUAGES).reduce((acc, language) => {
    let { peerDependencies } = COMPONENTS.languages[language];
    if (peerDependencies) {
        if (!Array.isArray(peerDependencies)) {
            peerDependencies = [peerDependencies];
        }

        peerDependencies.forEach(peer => {
            if (!acc[peer]) {
                acc[peer] = [];
            }
            acc[peer].push(language);
        });
    }

    return acc;
}, {});

import React from "react"
import PrismComponents from "prismjs/components"
import ReactSelect from "react-select"
import styled from "styled-components"
import PropTypes from "prop-types"

const MultiSelect = styled(ReactSelect)`
  color: black;
`

const exclude = {
  meta: true,
  markup: true,
}

const languages = Object.entries(PrismComponents.languages).reduce(
  (acc, [key, value]) => {
    if (exclude[key]) {
      return acc
    }
    return {
      ...acc,
      [key]: {
        label: value.title,
        isLoaded: false,
      },
    }
  },
  {},
)

const optionsForSelect = Object.entries(languages)

const fs = require('fs');
const { resolve } = require('path');
const Mustache = require('mustache');
const Prism = require('prismjs');
const PrismLanguages = require('prismjs/components').languages;

const template = `


  
    
    <title>code2png</title>
    {{#styles}}
    <style type="text/css">{{{.}}}</style>
    {{/styles}}

    {{#scripts}}
    
    {{/scripts}}