mProjectsCode / mProjectsCode/obsidian-shiki-plugin

Inline code not highlighted in Live Preview / Edit Mode on Android

Open
#82 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
238
Forks
25
PR merge metrics
No merged PRs in 30d

Description

  • The Plugin is up to date
  • Obsidian is up to date

Describe the bug

Inline code highlighting setting: Enabled

Inline code that uses Shiki Highlighter syntax (e.g. `{js} const x = 1`) is not highlighted in Live Preview (edit mode) on Android, even with the inline code option enabled in the plugin settings and without any custom CSS applied.

Highlighting works correctly in Reading Mode.

In Live Preview, highlighting only appears under very specific and unreliable circunstances — for example, after editing and saving an Obsidian CSS snippet from an external editor, which seems to trigger an unintended re-render of the plugin.


Expected behavior

Inline code with Shiki language tags should be tokenized and highlighted consistently in Live Preview, the same way it is in Reading Mode.

Actual behavior

In Live Preview, Shiki does not process inline code. No syntax-colored <span> elements are injected into the DOM, so there is nothing for CSS to style. The code appears as plain, unstyled text.


Steps to reproduce
  1. Install Shiki Highlighter and enable the inline code option in its settings.
  2. Open any note in Live Preview mode on an Android device with inline code block that uses Shiki Highlighter syntax (e.g. {js} const x = 1.
  3. Observe that no syntax highlighting is applied.
  4. Switch to Reading Mode — highlighting appears correctly.

Occurs on

  • Windows
  • macOS
  • Linux
  • Android
  • iOS

Plugin version
0.7.7

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue on Android with the inline code highlighting option enabled, then compare the Live Preview rendering path with Reading Mode for the same Shiki syntax. Check whether Live Preview creates the highlighted span elements after editing or re-rendering, and verify that inline code is consistently highlighted in Live Preview while Reading Mode remains working.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.