CodeblockCustomizer
Codeblock Customizer plugin for Obsidian
Install / Use
/learn @mugiwara85/CodeblockCustomizerREADME
This is a plugin for Obsidian (https://obsidian.md).
The plugin lets you customize the code blocks in the following way:
- Choose from built-in themes (Obsidian, Solarized, Dracula, Gruvbox, Nord, Tokyo Night) or create your own.
- Enable active line highlighting for the editor and for code blocks specifically.
- Exclude specific languages or individual code blocks from styling.
- Set custom background colors for code blocks.
- Highlight specific lines or text segments with multiple, definable colors.
- Display a header with a filename or title, with full styling options.
- Fold code blocks by clicking the header, with options for default fold states and persistence.
- Display language names and icons in the header.
- Add line numbers with optional starting offsets.
- Create semi-interactive terminal prompts with
prompt:. - Group consecutive code blocks into a single tabbed interface.
- 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 languages 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
- NEW: Modifier keys for buttons and inline code
- NEW: New Themes (Dracula, Gruvbox, Nord, Tokyo Night)
- NEW: New
parseparameter to parse raw CLI output for promtps - NEW: New
hideparameter to hide lines or ranges - NEW: New option to define "line number jumps"
- NEW: New "Copy as image" button to create snapshots of code blocks
- NEW: New blur effect for semi-fold
- NEW: Syntax Themes. Using this you can define each color for syntax highlighting tokens. Read more below.
- NEW: Added customizable frontmatter syntax coloring in editing mode
- NEW: Added option to define PrismJS syntax highlighting rules for custom languages
- and much more...
For a more detailed list of changes, check the Changelog.
📋 Table of Contents
- Parameters
- PrismJS Syntax Highlighting
- Themes
- Display Filename/Title
- Header
- Line Numbers
- Syntax Themes
- Highlighting
- Language Specific Coloring
- Folding
- Wrap Code Lines
- Grouped Code Blocks
- Terminal Prompts
- Annotations
- Hide Fence Lines
- Hiding Lines
- Inline Code
- Commands
- Print to PDF
- Indented Code Blocks
- Links
- Custom SVGs and Syntax Highlight Assignment
- Syntax Highlighting for Custom Languages
- Bracket Highlight
- Selection Matching
- Plugin Compatibility
- How to Install the Plugin
- Contributing & Support
Parameters
Parameters can be defined in the opening line of a code block (after the three opening backticks).
All parameters can be defined using : or =.
| Name | Value | Description |
| -------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| fold | | Defines that the code block is in folded state when the document is opened. |
| unfold | | Defined that the code block is in unfolded state when the document is opened and the Inverse fold behavior option is enabled, otherwise ignored. |
| exclude | | Exclude the code block from the plugin. |
| hl | Multiple | Everything that applies to the hl parameter also applies to alternative highlight colors!<br>Multiple values can be combined with a , (e.g: hl:test,3,5-6,9\|abc,test1,test2,10-15\|test3)<br>Highlights specified lines on different formats: |
| | hl:{number} | hl:5 - Highlights line 5. |
| | hl:{range} | hl:5-7 - Highlights lines from 5 to 7. |
| | hl:{string} | hl:test - Highlights all lines containing the word test. |
| | hl:{number}|{string} | hl:5\|test - Highlights line 5 if it contains the word test. |
| | hl:{range}|{string} | hl:5-7\|test - Highlights lines 5 to 7 if they contain the word test. |
| hlt | Multiple | Everything that applies to the hlt parameter also applies to alternative highlight colors!<br>Multiple values can be combined with a , just like for the hl parameter.<br>Highlights specified text on different formats: |
| | hlt:{string} | hlt:test - Highlights the word test in every line it is found. |
| | hlt:{number} | hlt:5 - Highlights all the text in line 5. |
| | hlt::{string} | hlt::xyz - If the start position is not defined but the end position is, the text will be highlighted from the beginning of the line up to the end position. |
| | hlt:{string}: | hlt:abc: - If the start position is defined, but the end position is not, the text will be highlighted from the start position, until the end of the line. |
| | hlt:{string}:{string} | hlt:abc:xyz - Highlights text in lines starting with abc and ending with xyz. |
| | hlt:{number}|... | All the above options can be prepended with an optional number and a \| to specify in which line to highlight the text. |
| | hlt:{number}[occurence]|... | All the above options can be prepended with an optional occurence before the \| to specify which occurence to highlight in the text. (e.g. hlt:5[2,5-8]\|test -> highlights the second, and the 5th, 6th, 7th and 8th occurence of test in line five) |
| | hlt:{range}|... | All the above options can be prepended with an optional range and a \| to specify in which range to highlight the text.
