Control CodeMirror: Modify the style of text area placeholders

Question

I am using version 5.65.7 of the CodeMirror plugin in a textarea in a Vuejs based web application and everything is working fine without any issues. I want to add a placeholder to my textarea so I have added the corresponding placeholder file to my application and I can see the placeholder in my textarea.

I wanted to change the font color of the placeholder and center align it, so I tried making some modifications to the codemirror style, but for some reason it didn't work at all. Can you tell me how to change the font color and centered placeholder of a CodeMirror controlled text area?

I looked at a similar question here: Placeholder Font Color" and tried to do the same thing but for some reason it didn't work.

I created a sample project based on my actual application to demonstrate the issues in CodeSandBox.

I tried looking at the dev tools and tried that but it didn't work as expected. Can someone let me know what I'm doing wrong and provide some workaround?

The following are code examples also available in CodeSandBox:

<template>
  <div class="container">
    <div class="row">
      <div class="col-md-5 offset-md-1 mt-5 mr-2 mb-2 pt-2">
        <textarea
          id="jsonEvents"
          ref="jsonEvents"
          v-model="jsonEvents"
          class="form-control"
          placeholder="Document in JSON format"
          spellcheck="false"
          data-gramm="false"
        />
      </div>

      <div class="col-md-5 offset-md-1 mt-5 mr-2 mb-2 pt-2">
        <textarea
          id="xmlEvents"
          ref="xmlEvents"
          v-model="xmlEvents"
          class="form-control"
          placeholder="Document in XML format"
          spellcheck="false"
          data-gramm="false"
        />
      </div>
    </div>
  </div>
</template>

<script>
let CodeMirror = null;

if (typeof window !== "undefined" && typeof window.navigator !== "undefined") {
  CodeMirror = require("codemirror");
  require("codemirror/mode/xml/xml.js");
  require("codemirror/mode/javascript/javascript.js");
  require("codemirror/lib/codemirror.css");
  require("codemirror/addon/lint/lint.js");
  require("codemirror/addon/lint/lint.css");
  require("codemirror/addon/lint/javascript-lint.js");
  require("codemirror/addon/hint/javascript-hint.js");
  require("codemirror/addon/display/placeholder.js");
}

export default {
  name: "Converter",
  components: {},
  data() {
    return {
      xmlEvents: "",
      jsonEvents: "",
      xmlEditor: null,
      jsonEditor: null,
    };
  },
  mounted() {
    // Make the XML textarea CodeMirror
    this.xmlEditor = CodeMirror.fromTextArea(this.$refs.xmlEvents, {
      mode: "application/xml",
      beautify: { initialBeautify: true, autoBeautify: true },
      lineNumbers: true,
      indentWithTabs: true,
      autofocus: true,
      tabSize: 2,
      gutters: ["CodeMirror-lint-markers"],
      lint: true,
      autoCloseBrackets: true,
      autoCloseTags: true,
      styleActiveLine: true,
      styleActiveSelected: true,
    });

    // Set the height for the XML CodeMirror
    this.xmlEditor.setSize(null, "75vh");

    // Make the JSON textarea CodeMirror
    this.jsonEditor = CodeMirror.fromTextArea(this.$refs.jsonEvents, {
      mode: "applicaton/ld+json",
      beautify: { initialBeautify: true, autoBeautify: true },
      lineNumbers: true,
      indentWithTabs: true,
      autofocus: true,
      tabSize: 2,
      gutters: ["CodeMirror-lint-markers"],
      autoCloseBrackets: true,
      autoCloseTags: true,
      styleActiveLine: true,
      styleActiveSelected: true,
    });

    // Set the height for the JSON CodeMirror
    this.jsonEditor.setSize(null, "75vh");

    // Add the border for all the CodeMirror textarea
    for (const s of document.getElementsByClassName("CodeMirror")) {
      s.style.border = "1px solid black";
    }
  },
};
</script>

<style>
textarea {
  height: 75vh;
  white-space: nowrap;
  resize: both;
  border: 1px solid black;
}

.cm-editor .cm-placeholder {
  color: red !important;
  text-align: center;
  line-height: 200px;
}

.CodeMirror-editor pre.CodeMirror-placeholder {
  color: red !important;
  text-align: center;
  line-height: 200px;
}

.CodeMirror-editor .CodeMirror-placeholder {
  color: red !important;
  text-align: center;
  line-height: 200px;
}
</style>

Answer 1

Somehow I can't use your codesandbox without logging in, But you can try using pseudo-classes like this:

textarea::placeholder {
  color: red; 
}

Please refer to this documentation.

Answer 2

If possible, you can use Javascript to achieve this -

let placeholder_el = document.querySelectorAll('pre.CodeMirror-placeholder')[0];
placeholder_el.style['color'] = 'red';
placeholder_el.style['text-align'] =  'center';
placeholder_el.style['line-height'] =  '200px';