Code removed from output

Describe the bug

Highlighting the following code as html results in the alert() part being removed:

<script>alert()</script>

becomes

<script></script>

To Reproduce

JSX

import SyntaxHighlighter from 'react-syntax-highlighter';

const code = `<script>alert()</script>`;
const element = <SyntaxHighlighter language="html">{code}</SyntaxHighlighter>;

Node.js

Let’s use babel to transcode the following:

import React from "react";
import renderer from "react-test-renderer";
import SyntaxHighlighter from "react-test-renderer";

const code = `<script>alert()</script>`;

const tree = renderer
  .create(<SyntaxHighlighter language="html">{code}</SyntaxHighlighter>)
  .toJSON();
console.log(JSON.stringify(tree, undefined, 2));

into:

"use strict";

var react = _interopRequireDefault(require("react"));

var reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));

var reactSyntaxHighlighter = _interopRequireDefault(
  require("react-syntax-highlighter")
);

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj };
}

var code = "<script>alert()</script>";

var tree = reactTestRenderer.default
  .create(
    react.default.createElement(
      reactSyntaxHighlighter.default,
      {
        language: "html"
      },
      code
    )
  )
  .toJSON();

console.log(JSON.stringify(tree, undefined, 2));

When running this script with Node.js (provided react-test-renderer is installed as well), it outputs:

{
  "type": "pre",
  "props": {
    "style": {
      "display": "block",
      "overflowX": "auto",
      "padding": "0.5em",
      "background": "#F0F0F0",
      "color": "#444"
    }
  },
  "children": [
    {
      "type": "code",
      "props": {},
      "children": [
        {
          "type": "span",
          "props": {
            "className": "hljs-tag",
            "style": {}
          },
          "children": [
            "<",
            {
              "type": "span",
              "props": {
                "style": {
                  "fontWeight": "bold"
                }
              },
              "children": [
                "script"
              ]
            },
            ">"
          ]
        },
        {
          "type": "span",
          "props": {
            "className": "null",
            "style": {}
          },
          "children": null
        },
        {
          "type": "span",
          "props": {
            "className": "hljs-tag",
            "style": {}
          },
          "children": [
            "</",
            {
              "type": "span",
              "props": {
                "style": {
                  "fontWeight": "bold"
                }
              },
              "children": [
                "script"
              ]
            },
            ">"
          ]
        }
      ]
    }
  ]
}

as you can see, the alert() part is replaced with:

        {
          "type": "span",
          "props": {
            "className": "null",
            "style": {}
          },
          "children": null
        },

Expected behavior

The output should still have alert() from the input.

Desktop (please complete the following information):

• OS: ArchLinux
• Browser: tested with Firefox 68.0.2 and Chrome76.0.3809.100
• Version: react-syntax-highlighter 11.0.2

[simmerer]

We’re using lowlight=1.14.0 now, so this is resolved in react-syntax-highlighter 13.0.0+

Try it here in the updated demo: https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html

[Rogdham]

In the meanwhile, a workaround is to use Yarn’s resolution feature by adding the following to package.json:

  "resolutions": {
    "react-syntax-highlighter": "12.2.1"
  },