# Issues while integrating the CodeMirror to TextArea (XML/JSON-LD content) using Vuejs **URL:** \ **Category:** Meta\ **Created:** [October 15, 2021, 3:17pm UTC](https://discuss.codemirror.net/t/issues-while-integrating-the-codemirror-to-textarea-xml-json-ld-content-using-vuejs/3630 "2021-10-15T15:17:34Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![basvb1992](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/b/c2a13f/32.png) [@basvb1992](https://discuss.codemirror.net/u/basvb1992)\ **Post date:** [October 15, 2021, 3:17pm UTC](https://discuss.codemirror.net/t/issues-while-integrating-the-codemirror-to-textarea-xml-json-ld-content-using-vuejs/3630/1 "2021-10-15T15:17:35Z")
I have an `Vuejs/Nuxtjs` application with 2 `textarea`. One `textarea` is dedicated for `XML` and another for `JSON-LD`. To highlight the syntax in respective `textarea` I have integrated [`CodeMirror`](https://codemirror.net/doc/manual.html) into my application and everything so far working correctly. I have provided Code Sandbox for testing the same: [great-browser-gfzdf - CodeSandbox](https://codesandbox.io/s/great-browser-gfzdf?file=/pages/index.vue) I am facing the following minor issues with `CodeMirror`: 1. Highlighting of the `XML` text works perfectly however for `JSON-LD` all the text are displayed with `red font-color`. I am not understanding why all `key/values` are displayed in the same color. Is it actually highlighting the contents? Is this default behavior for `CodeMirror application/ld+json` contents? 2. I have added the `linting` option for the `JSON-LD` textarea. If there is any syntax error then it will be highlighted and an `X arrow` with a message will be displayed against that error to provide more information. However, if there is any `Syntax error` in `XML` contents then they are just highlighted in `red font` but it does not show the `X` arrow against the line and provide more information. How can I achieve the same for the `XML area`? Steps to recreate [here in CodeSandbox](https://codesandbox.io/s/great-browser-gfzdf?file=/pages/index.vue): 1. Copy the following `JSON-LD` text and paste it in the `JSON-LD` textarea, you can see that all information is displayed in the same color: ```auto { "@context": "https://json-ld.org/contexts/person.jsonld", "@id": "http://dbpedia.org/resource/John_Lennon", "spouse": "http://dbpedia.org/resource/Cynthia_Lennon" } ``` 1. Remove `comma/brackets` from the `JSON-LD` content provided in `issue-1 above`, we can see that the respective line is highlighted and displayed with `X symbol` to provide more information. Now copy the `XML` contents into `XML Area` and remove one character to make the `XML` syntactically invalid, we can see that contents are highlighted in `red` but cannot see any error message against that line ```auto XML Developer's Guide Computer 44.95 ``` Can someone please help me with this issue? Any help will be really appreciated. Edited: I tried the approach mentioned here: [javascript - Codemirror Show HTMLLint Errors Inline (.addLineWidget) - Stack Overflow](https://stackoverflow.com/a/35698748/7584240) but this is not working as expected for me. ---
**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\ **Post date:** [October 15, 2021, 3:41pm UTC](https://discuss.codemirror.net/t/issues-while-integrating-the-codemirror-to-textarea-xml-json-ld-content-using-vuejs/3630/2 "2021-10-15T15:41:21Z")
Yes, that’s how the editor highlights JSON. And no, there’s no schema-validating XML linter, though you could probably write your own. ---
**Author:** ![basvb1992](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/b/c2a13f/32.png) [@basvb1992](https://discuss.codemirror.net/u/basvb1992)\ **Post date:** [October 16, 2021, 8:33am UTC](https://discuss.codemirror.net/t/issues-while-integrating-the-codemirror-to-textarea-xml-json-ld-content-using-vuejs/3630/3 "2021-10-16T08:33:14Z")
@marijn Thanks a lot for the response. Ok, so I will keep the same for highlighting the JSON. How to write my own XML Linter? Some examples/documentation I can refer to? I found the following package which will provide the error if the XML is statically incorrect `fast-xml-parser`, can this be made use of somehow? Really looking forward to your response. Thanks a lot in advance. ---
**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\ **Post date:** [October 16, 2021, 9:03am UTC](https://discuss.codemirror.net/t/issues-while-integrating-the-codemirror-to-textarea-xml-json-ld-content-using-vuejs/3630/4 "2021-10-16T09:03:28Z")
The [lint addon](https://codemirror.net/doc/manual.html#addon_lint) is what you need to work with to display errors. ---
**Author:** ![basvb1992](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/b/c2a13f/32.png) [@basvb1992](https://discuss.codemirror.net/u/basvb1992)\ **Post date:** [October 16, 2021, 6:35pm UTC](https://discuss.codemirror.net/t/issues-while-integrating-the-codemirror-to-textarea-xml-json-ld-content-using-vuejs/3630/5 "2021-10-16T18:35:06Z")
@marijn Ya I have added that to my `CodeMirror` if you observe my `CodeSandBox`: [https://codesandbox.io/s/great-browser-gfzdf?file=/pages/index.vue](https://codesandbox.io/s/great-browser-gfzdf?file=/pages/index.vue) You can see that I have added it but am still unable to highlight the error. ---
**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\ **Post date:** [October 17, 2021, 12:52am UTC](https://discuss.codemirror.net/t/issues-while-integrating-the-codemirror-to-textarea-xml-json-ld-content-using-vuejs/3630/6 "2021-10-17T00:52:35Z")
Yes, you’ll need to write the code to integrate it with the errors reported by your xml parser.