CODEWITHSUNDEEP
javascriptcodemirror
Joy
Joy

Reputation: 103

How being able to recognize javascript in codemirror?

I am creating a website in which I am trying to embed code blocks. Someone referred me to the CodeMirror library and thereafter I am trying to have some Javascript code in a code block .

I have incorporated the CodeMirror CSS and JS libraries into my HTMl file and have created an instance of CodeMirror.

I managed to create a code block. But the code block doesn't apply any formatting/styling to the text in regards to whether it is Javascript or not

It just shows a code block with plain text. I have till now implemented the following code.

At the beginning I defined the following lines:

<link rel="stylesheet" href="codemirror-5.47.0/lib/codemirror.css">

<script src="codemirror-5.47.0/lib/codemirror.js"></script>

<script type="text/javascript" language="javascript">
    window.load = function () {
        var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("codeeditor"), {
            mode: "javascript",
            lineNumbers: true
        });

        myCodeMirror.setSize(500, 300);
    }
</script>

<textarea id="codeeditor" rows="20" cols="100">
                                                           var GetArray = function (Feature) {var dic = {                    "Bedrijfsvestigingen":                    ["bedrijfsvestigingen_Sbi2008_BedrijfsvestigingenNaarActiviteit_ALandbouw_BosbouwEnVisserij",                    "bedrijfsvestigingen_Sbi2008_BedrijfsvestigingenNaarActiviteit_B-fNijverheidEnEnergie",                    "bedrijfsvestigingen_Sbi2008_BedrijfsvestigingenNaarActiviteit_G_p_IHandelEnHoreca",                    "bedrijfsvestigingen_Sbi2008_BedrijfsvestigingenNaarActiviteit_H_p_JVervoer_InformatieEnCommunicatie",                    "bedrijfsvestigingen_Sbi2008_BedrijfsvestigingenNaarActiviteit_K-lFinancieleDiensten_OnroerendGoed",                    "bedrijfsvestigingen_Sbi2008_BedrijfsvestigingenNaarActiviteit_M-nZakelijkeDienstverlening",                    "bedrijfsvestigingen_Sbi2008_BedrijfsvestigingenNaarActiviteit_R-uCultuur_Recreatie_OverigeDiensten",                    "bedrijfsvestigingen_Sbi2008_BedrijfsvestigingenTotaal"]};

</textarea>

The result is thus a code block with plain text and thus not formatting have been applied on JavaScript code. In case someone knows a solution to this problem, it would be nice to have a pure Javascript solution, since for example I am not familiar with jQuery for example.

Upvotes: 0

Views: 407

Answers (1)

Thomas
Thomas

Reputation: 12677

You seem to have forgotten to import the "mode"-file; and probably some addons.

var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("codeeditor"), {
  mode: "javascript",
  lineNumbers: true
});
//myCodeMirror.setSize(500, 300);
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.47.0/codemirror.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.47.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.47.0/mode/javascript/javascript.min.js"></script>

<textarea id="codeeditor" rows="20" cols="100">
var GetArray = function(Feature) {
  var dic = {
    "Bedrijfsvestigingen": [
      "bedrijfsvestigingen_Sbi2008_BedrijfsvestigingenNaarActiviteit_ALandbouw_BosbouwEnVisserij",
      "bedrijfsvestigingen_Sbi2008_BedrijfsvestigingenNaarActiviteit_B-fNijverheidEnEnergie",
      "bedrijfsvestigingen_Sbi2008_BedrijfsvestigingenNaarActiviteit_G_p_IHandelEnHoreca",
      "bedrijfsvestigingen_Sbi2008_BedrijfsvestigingenNaarActiviteit_H_p_JVervoer_InformatieEnCommunicatie",
      "bedrijfsvestigingen_Sbi2008_BedrijfsvestigingenNaarActiviteit_K-lFinancieleDiensten_OnroerendGoed",
      "bedrijfsvestigingen_Sbi2008_BedrijfsvestigingenNaarActiviteit_M-nZakelijkeDienstverlening",
      "bedrijfsvestigingen_Sbi2008_BedrijfsvestigingenNaarActiviteit_R-uCultuur_Recreatie_OverigeDiensten",
      "bedrijfsvestigingen_Sbi2008_BedrijfsvestigingenTotaal"
    ]
  };
}
</textarea>

Upvotes: 1

Related Questions