Vue syntax highlighting doesn't work in Reading Mode

Steps to reproduce

  1. Open the Sandbox Vault.
  2. Enter the following in the body of a new note:
    <script setup lang="ts">
    import useAppStore from "@/stores/app"
    import { computed } from "vue"
    const appStore = useAppStore()
    const localName = computed(() => appStore.itemDetails)
    const localActionName = appStore.fetchItemDetails
  3. Add the final closing backticks as well. ```
  4. Observe Syntax highlighting in Editing view
  5. Switch to Reading View

Expected result

Syntax highlighting should be consistent across both Reading & Editing Views.

Actual result

Only Editing View has colors. Reading View is not colored.


Obsidian version: v1.3.5
Installer version: v1.3.5
Operating system: Windows 10 Enterprise 10.0.19045
Login status: not logged in
Insider build toggle: off
Live preview: on
Legacy editor: off
Base theme: dark
Community theme: none
Snippets enabled: 0
Restricted mode: on


Additional information

This is not a bug.

Reading view uses a different code highlighting engine from source mode/live preview


I realize they’re different engines, one is CodeMirror, and the other is … something else. The bug is that the result is inconsistent. I realize it’s not a high priority or critical bug, but it is a bug nonetheless.

I’m enjoying Obsidian immensely, and this so far the only issue I’ve ran in to with it, which is a testament to the team’s amazing work. Hopefully it’s an easy fix.

1 Like

If/When this is implemented upstream, we will get it.