Not Highlighting code blocks in vue

[CSFM93]

Hi thanks for creating such an amazing library, i have tried to use it but it doesn't highlight code blocks.

The code i tried:

var HyperMD = require("hypermd");

export default {
  name: "MdEditor",
  data: () => ({
    rendered: false,
  }),

  methods: {
    render() {
      if (!this.rendered) {
        var myTextarea = document.getElementById("input-area");
        var editor = HyperMD.fromTextArea(myTextarea, {
          lineNumbers: false,
          mode: {
            name: "hypermd",
            hashtag: true, 
          },
        });
        editor.setSize(null, "900px"); // set height
      }
    },
  },
};

[mikeerickson]

@CSFM93 Were you ever able to get this working? I have been fighting with this library and cant seem to get it working with Vue. In my case, I always receive an error

Cannot read property 'value' of null

[salihselimsekerci]

1. Gerekli dosyaların doğru yüklenmesi
Projene aşağıdaki örneğe uygun şekilde import eklemen gerekli:
import HyperMD from "hypermd";
import CodeMirror from "codemirror/lib/codemirror.js";
import "codemirror/lib/codemirror.css";

// HyperMD modu ve teması
import "hypermd/mode/hypermd.js";
import "hypermd/theme/hypermd-light.css";

// Kod blokları için gerekli CodeMirror modları
import "codemirror/mode/javascript/javascript.js";
import "codemirror/mode/xml/xml.js"; // örneğin HTML
import "codemirror/mode/css/css.js";

2. KodMirror editörünü yapılandırma
Vue bileşenine şöyle ekle:
mounted() {
const cm = CodeMirror(this.$refs.ta, {
mode: "text/x-hypermd",
theme: "hypermd-light",
lineNumbers: true,
lineWrapping: true
});

cm.hmdClickInit(); // tıklama özelliği
cm.hmdHoverInit(); // hover özelliği
}

### Özet Yapı:
import CodeMirror from "codemirror";
import "codemirror/lib/codemirror.css";
import "codemirror/mode/javascript/javascript";
import "codemirror/mode/xml/xml";
import "hypermd/mode/hypermd";
import "hypermd/theme/hypermd-light.css";

export default {
mounted() {
const cm = CodeMirror(this.$refs.ta, {
mode: "text/x-hypermd",
theme: "hypermd-light",
lineNumbers: true
});
cm.hmdClickInit();
cm.hmdHoverInit();
}
}