Vue syntax highlighting doesn't work in Reading Mode

Bug graveyard
1

Steps to reproduce

  1. Open the Sandbox Vault.
  2. Enter the following in the body of a new note:
    ```vue
<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
</script>
  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.

Environment

SYSTEM INFO:
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

RECOMMENDATIONS:
none

Additional information

2

This is not a bug.

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

See:

3

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
4

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