import React from 'react';
import Prism from 'prismjs';
import 'prismjs/components/prism-jsx.min';

function CodeBlock(props) {
  const { language, literal } = props;
  const clsName = `language-${language}`;
  let parsingLanguage;
  let markup;
  if (language === 'js') {
    parsingLanguage = Prism.languages.javascript;
  }
  if (language === 'css') {
    parsingLanguage = Prism.languages.css;
  }
  if (language === 'html') {
    parsingLanguage = Prism.languages.html;
  }
  if (language === 'jsx') {
    parsingLanguage = Prism.languages.jsx;
  }
  if (parsingLanguage) {
    markup = { __html: Prism.highlight(literal, parsingLanguage) };
    return (
      <pre className={clsName}>
        <code
          className={clsName}
          dangerouslySetInnerHTML={markup}
        />
      </pre>
    );
  }
  return (
    <pre>
      <code>
        { literal }
      </code>
    </pre>
  );
}

export default CodeBlock;

@@ -198,16 +198,26 @@
 language
+ %7C%7C 'text'
 %7D%60;%0A  le
@@ -840,21 +840,61 @@
 %3Cpre
-%3E%0A      %3Ccode
+ className=%7BclsName%7D%3E%0A      %3Ccode className=%7BclsName%7D
 %3E%0A  

Add language-text to <CodeBlock>