Release 1.4.1

Author: mugiwara85

Changelog.txt

@@ -1,3 +1,7 @@
+- 1.4.1 (2026.03.11)
+  New:
+    - Added option to use PrismJS for syntax highlighting in editor mode. This means more languages get syntax highlight and same syntax highlight between editor and reading mode (#82,#134,#140)
+
 - 1.4.0 (2026.03.10)
   New:
     - Wrap code now also works in editor mode

README.md

@@ -22,6 +22,7 @@ The plugin lets you customize the code blocks in the following way:
 - Transform code comments into styled annotations. 
 - Apply syntax highlighting to inline code. 
 - Hide fence lines in editor mode for a cleaner look. 
+- **NEW:** Added option to use PrismJS for syntax highlighting in editor mode => Same syntax highlight in editor and reading mode and more langauges get syntax highlighted  
 - **NEW:** Search option in the settings page to find faster a specific setting 
 - **NEW:** Wrap/Unwrap button in editor mode 
 - **NEW:** Execute Code Plugin compatibility 
@@ -39,6 +40,7 @@ For a more detailed list of changes, check the [Changelog](./Changelog.txt).
 ## 📋 Table of Contents 
 
 - [Parameters](#parameters) 
+- [PrismJS Syntax Highlighting](#prismjs-syntax-highlighting)
 - [Themes](#themes) 
 - [Display Filename/Title](#display-filenametitle) 
 - [Header](#header) 
@@ -118,6 +120,27 @@ All parameters can be defined using `:` or `=`.
 
 </details>
 
+## PrismJS Syntax Highlighting
+
+This is an **experimental** setting, but it is worth talking about this. 
+
+Small background information:
+The syntax highlighting wasn't the same in editing and reading mode, because Obsidian uses two different engines. The one used in editor mode is `CodeMirror 6`, and the other for reading mode is `PrismJS`. The problem with this is, that `CodeMirror` supports less languages then `PrismJS`, and even if it supports the same language it will probably still differ, because it works different.
+
+So what does this setting do? It forces the editor to use `PrismJS` in editor mode. This results, that when this setting is enabled, the syntax highlighting is the **same** in editing and reading modes!
+But that's not all! This setting also has a positive side effect. `CodeMirror` does support a lot of languages, but nearly not as many as `PrismJS`. When this setting is enabled, that also means that languages which `CodeMirror` does not support (e.g. `graphql` or `makefile` or `hlsl`) also get syntax highlighting, because `PrismJS` does support it.  
+
+Even though this setting is not as thourughly tested as others, I wanted to release it easlier. Should you encounter some errors or bugs, just open an issue.  
+
+Example code block in editor mode with the setting disabled:
+
+![PrismDisabled](attachments/PrismDisabled.png)
+
+Same code block with setting enabled (matches reading mode):
+
+![PrismEnabled](attachments/PrismEnabled.png)
+
+
 ## Themes
 
 The plugin comes with multiple themes (Obsidian, Solarized, Dracula, Gruvbox, Nord, Tokyo Night). The default theme is Obsidian.

attachments/PrismDisabled.png

@@ -1,7 +1,7 @@
 {
 	"id": "codeblock-customizer",
 	"name": "Codeblock Customizer",
-	"version": "1.4.0",
+	"version": "1.4.1",
 	"minAppVersion": "0.15.0",
 	"description": "This Obsidian plugin lets you customize your codeblocks in editing, and reading mode as well.",
 	"author": "mugiwara",

attachments/PrismEnabled.png

@@ -1,6 +1,6 @@
 {
 	"name": "codeblock-customizer",
-	"version": "1.4.0",
+	"version": "1.4.1",
 	"description": "The plugin lets you customize your Obsidian code blocks and inline code in editing mode and reading mode as well.",
 	"main": "main.js",
 	"scripts": {

main.js

@@ -36,6 +36,22 @@ export class AppearanceSettings {
     const editorActiveLineSetting = createPickrSetting(appearanceDiv, 'Editor active line color', '', "editorActiveLineColor", this.pickerInstances, this.plugin);
     editorActiveLineSetting.settingEl.toggleClass('codeblock-customizer-setting-hidden', !this.plugin.settings.pluginSettings.enableEditorActiveLineHighlight);
 
+    const prismSetting = new Setting(appearanceDiv)
+      .setName('Use PrismJS syntax highlighting in editor mode')
+      .setDesc('If enabled, editor mode will use PrismJS for syntax highlighting instead of CodeMirror\'s built-in highlighting. This makes editor mode syntax highlighting match reading mode syntax highlighting.')
+      .addToggle(toggle => toggle
+        .setValue(this.plugin.settings.pluginSettings.codeblock.usePrismHighlight)
+        .onChange(async (value) => {
+          this.plugin.settings.pluginSettings.codeblock.usePrismHighlight = value;
+          await this.plugin.saveSettings();
+        })
+      );
+    const warningEl = prismSetting.descEl.createDiv({ cls: "mod-warning" });
+    warningEl.style.color = "var(--text-error)";
+    warningEl.style.marginTop = "4px";
+    warningEl.style.fontWeight = "bold";
+    warningEl.setText("Experimental: This feature is still being tested. Please report any issues you encounter.");
+
     // code block styling
     const codeBlockDetails = createDetailsGroup(appearanceDiv, 'Code Block Styling', 'codeBlockDetailsOpen', this, this.getSearchQuery);
 

manifest.json

@@ -57,22 +57,6 @@ export class BehaviorSettings {
         })
       );
 
-    const prismSetting = new Setting(behaviorDiv)
-      .setName('Use PrismJS syntax highlighting in editor mode')
-      .setDesc('If enabled, editor mode will use PrismJS for syntax highlighting instead of CodeMirror\'s built-in highlighting. This makes editor mode syntax highlighting match reading mode syntax highlighting.')
-      .addToggle(toggle => toggle
-        .setValue(this.plugin.settings.pluginSettings.codeblock.usePrismHighlight)
-        .onChange(async (value) => {
-          this.plugin.settings.pluginSettings.codeblock.usePrismHighlight = value;
-          await this.plugin.saveSettings();
-        })
-      );
-    const warningEl = prismSetting.descEl.createDiv({ cls: "mod-warning" });
-    warningEl.style.color = "var(--text-error)";
-    warningEl.style.marginTop = "4px";
-    warningEl.style.fontWeight = "bold";
-    warningEl.setText("Experimental: This feature is still being tested. Please report any issues you encounter.");
-
     // grouped code blocks
     const groupedCodeBlocksDetails = createDetailsGroup(behaviorDiv, 'Grouped Code Block Settings', 'groupedCodeBlocksDetailsOpen', this, this.getSearchQuery);
 

package.json

@@ -10,5 +10,6 @@
 	"1.2.8": "0.15.0",
 	"1.3.0": "0.15.0",
 	"1.3.1": "0.15.0",
-	"1.4.0": "0.15.0"
+	"1.4.0": "0.15.0",
+	"1.4.1": "0.15.0"
 }