lilarest / obsidian-custom-classes

A minimal Obsidian plugin that allows you to add your own HTML classes to chosen Markdown elements directly from your notes.

Obsidian Custom Classes

A minimal Obsidian plugin that allows you to add your own HTML
classes to chosen Markdown blocks directly from your notes.

Usage

You can add custom classes to :

• entire blocks (e.g. a whole list) → By inserting `class: <customClass>` on the line right before it

  This markdown (Edit mode)	Will be rendered (Live Preview / Read mode)
  `class: fancy-list` - Lorem ipsum - Dolor - Amet consectetur	<div class="fancy-list"> <ul> <li>Lorem ipsum</li> <li>Dolor sit</li> <li>Amet consectetur</li> </ul> </div>




• specific elements (e.g. a list item) → By inserting `class: <customClass>` inside of it

  This markdown (Edit mode)	Will be rendered (Live Preview / Read mode)
  - Lorem ipsum - Dolor sit `class: fancy-item` - Amet consectetur	<div> <ul> <li>Lorem ipsum</li> <li class="fancy-item">Dolor sit</li> <li>Amet consectetur</li> </ul> </div>




• or even both :

  This markdown (Edit mode)	Will be rendered (Live Preview / Read mode)
  `class: fancy-list` - Lorem ipsum - Dolor `class: fancy-item` sit - Amet consectetur	<div class="fancy-list"> <ul> <li>Lorem ipsum</li> <li class="fancy-item">Dolor sit</li> <li>Amet consectetur</li> </ul> </div>

ℹ️   For advanced usages and/or informations see the FAQ section.

Demonstrations

Here are some ways to use this plugin that may inspire you for your workflows.

Add a class to :

1. A whole table

   
   

   This markdown (Edit mode)	Will be rendered (Live Preview / Read mode)
   `class: mytable` | AAA | BBB | CCC | | --- | --- | --- | | 111 | 222 | 333 |	<div class="mytable"> <table> <thead> <tr> <th>AAA</th> <th>BBB</th> <th>CCC</th> </tr> </thead> <tbody> <tr> <td>111</td> <td>222</td> <td>333</td> </tr> </tbody> </table> </div>

   
   
2. A table cell

   
   

   This markdown (Edit mode)	Will be rendered (Live Preview / Read mode)
   | AAA | BBB | CCC | | --- | -------------------- | --- | | 111 | 222 `class: my-cell` | 333 |	<div> <table> <thead> <tr> <th>AAA</th> <th>BBB</th> <th>CCC</th> </tr> </thead> <tbody> <tr> <td>111</td> <td class="my-cell">222</td> <td>333</td> </tr> </tbody> </table> </div>

   
   
3. A Dataview query

   
   

   This markdown (Edit mode)	Will be rendered (Live Preview / Read mode)
   `class: my-dv-list` ```dataview LIST WHERE creation ```	<div class="my-dv-list"> <div class="block-language-dataview"> <ul class="dataview list-view-ul"> // The results of your query // <li>...</li> // ... </ul> </div> </div>

   
   
4. A heading

   
   

   This markdown (Edit mode)	Will be rendered (Live Preview / Read mode)
   `class: important-title` ### My super heading	<div class="important-title"> <h3>My super heading</h3> </div>

   
   
5. A blockquote

   
   

   This markdown (Edit mode)	Will be rendered (Live Preview / Read mode)
   `class: interesting-quote` > Lorem ipsum dolor sit amet	<div class="interesting-quote"> <blockquote> <p>Lorem ipsum dolor sit amet</p> </blockquote> </div>

   
   
6. An inline formatting

   
   

   This markdown (Edit mode)	Will be rendered (Live Preview / Read mode)
   I'm a **bold text `class: big`** and _`.small` me an italic one_	<p>I'm a <strong class="big">bold text</strong> and <em class="small">me an italic one</em></p>

   
   

Showcase / Integrations

That section displays some example of how people have integrated the Custom Classes plugin in their workflows. Feel free to share yours by opening an issue.

1. The Lila's frontmatter 🌸

   Here the Custom Classes plugin is used to render a Markdown unordered list (ul) as a clean frontmatter block.

   → Source: https://forum.obsidian.md/t/a-frontmatter-that-finally-supports-links-lilas-frontmatter/53087

   This markdown (Edit mode)	Will be rendered (Live Preview / Read mode)
   `class:meta` - creation:: 2023-01-21T18:55:12 - author:: [[John Doe]] - parents:: [[Note]], [[Another note]] - status:: #MayBePartial	Theme Dark Light

❔ FAQ

Why not to use <div class="my-custom-class"> instead ?

In Obsidian, wrapping a Markdown element in a div will break its render in Live Preview and Read modes, and prevent links from being clicked in Edit mode. Also, writing HTML into your notes makes them less readable.

Thanks to the Custom Classes plugin you're able to add a custom classes to Markdown elements without breaking anything and using plain-markdown format ! 🎉

Will it works in other Markdown editors ?

Since this plugin is exclusive to Obsidian, the custom classes will not be applied in other editors.

However since the custom classes blocks (`class: ...`) are simple Markdown inline code-blocks, they will properly render as code blocks in other Markdown editors.

Is it possible to add multiple classes at once ?

Yes, just separate each class by a comma :

This markdown (Edit mode)	Will be rendered (Live Preview / Read mode)
`class: first, second, third-one` I'm the paragraph and you ?	<div class="first second third-one"> <p>I'm the paragraph and you ?</p> </div>

Does it works in Live Preview mode ?

Yes the Live Preview mode is fully supported by this plugin.

By the way, elements targetted by a Custom Classes block are rendered in the exact same way in both Read and LP modes, allowing you to write CSS that will work everywhere.

The class: prefix is too long, is there any shorthand version ?

Yes the Custom Classes plugin will also consider as custom classes block every inline code-block that starts with cls:or with .

So `cls: wow` and `.wow` are equivalent to `class: wow`.

Installation

1. Go to Community Plugins section of your Obsidian's settings
2. Click on Browse and search for "Custom classes"
3. Select the Custom Classes plugin and click on Install
4. Once installed, click on Enable
5. Enjoy !

Inspiration

This plugin is originally inspired by the Obsidian Stylist plugin but has been entirely rewritten to :

• focus exclusively on adding custom HTML classes,
• support the Live Preview mode,
• fix some majors bugs (e.g. classes were not properly appended if the targetted block was modified and then re-rendered).

Contributing

See CONTRIBUTING.md.

obsidian-custom-classes's Issues

Plugin "custom-classes" is not passing Component in renderMarkdown

I often see my "custom class" definitions being rendered as a code line when in "reading mode" (I never use preview mode).

This behavior is random, but appears more often than not.

CSS Class Gets Applied to Ungrouped Elements

Describe the bug
Elements of the same type are grouped together even when there's a line break

To Reproduce
Steps to reproduce the behavior:

1. Add the element you want to apply the css to (paragraph, list, checkbox, etc)
2. Press enter or type
   
3. Add a second element of the same type
4. Go Into Reading Mode
5. CSS class still applies to second element

Expected behavior
The CSS class should only apply to the elements with no line breaks in between (as seen in preview)

Screenshots

Preview Mode

Reading Mode

Device (please complete the following information):

• Operating System: Windows 11
• Obsidian version: 1.1.16

Additional context
I was able to reproduce this using any other element

Unable to edit text in either src or preview mode.

Describe the bug
Unable to edit text in either src or preview mode.

To Reproduce
Steps to reproduce the behavior:

1. paste

`class: interesting-quote`
> Lorem ipsum dolor sit amet 

or any other example of text into md file.
2. try to edit the text by clicking, or moving cursor into the text. nothing happens.
3. If I add text to the end I can briefly see the code, but it disapears again.
4. If I delete startng backtick then I can see the text there.
5. I have tried this with many different example code.

Expected behavior
Being able to see the code in src view and click into code in preview.

Screenshots
If applicable, add screenshots to help explain your problem.

Screen.Recording.2023-02-24.at.9.44.29.PM.mov

Device (please complete the following information):

• Operating System: mac monterey 12.6.3
• Obsidian version: 1.1.9

Additional context
Add any other context about the problem here.

adding text wrapping feature

I love the idea of this plugin, I just wish it had one more feature and that's the ability to wrap multiple elements, for example:

start class here
element 1
element 2
end class here

It would making creating containers, lets for flex, much easier.

Adding classes to the whole list don't work in Reading mode

Describe the bug
Hello! It seams that adding classes to the whole list don't work in Reading mode (it works okay in Live Preview mode).

To Reproduce

Here is the source code I used:

`cls: red` 
- jgjhgjgjhgj
- fghfghfgh
- fghfghfgh`

I checked the html, in Live Preview it renders like this:

<div class="cc-container" contenteditable="false">
    <div class="markdown-rendered cc-renderer red">
        <ul>
            <li>jgjhgjgjhgj</li>
            <li>fghfghfgh</li>
            <li>fghfghfgh</li>
        </ul>
    </div>
</div>

But in Reading mode it renders like this:

<div>
    <p class="red">
        <code style="display: none;" cc-processed="true">cls: red</code> 
    </p>
</div>
<div>
    <ul class="has-list-bullet">
        <li data-line="0"><div class="list-bullet"></div>jgjhgjgjhgj</li>
        <li data-line="1"><div class="list-bullet"></div>fghfghfgh</li>
        <li data-line="2"><div class="list-bullet"></div>fghfghfgh</li>
    </ul>
</div>

So the class do not apply to the list itself.

Images are being rendered as span tags

When using class:something before an embedded image (![[some-image.jpg]]), the image element is rendered as a span.

Steps to reproduce the behavior:

1. Create a note
2. Embed some image file
3. Add class:something before it.

Expected behavior
There should be an <img> tag inside <div class="something">

Screenshots

Device:

• Operating System: Linux
• Obsidian version: 1.1.16

Use case example — custom inline formatting

Hi! I played with your plugin a little bit and come up with some ideas I find useful. One of them is custom inline formatting, not supported by default Markdown. For this to work formatted text and the custom class code must be put inside of any Markdown tags, so it is separated from the whole line. Here is some examples:

Additional highliting colors

Css:

mark.hl-orange {
background-color: rgba(208,138,112, 0.2);
}

mark.hl-green {
background-color: rgba(163,190,140, 0.2);
}

Result:

Underline

Css:

.underline {
font-style: normal;
text-decoration: underline;
}

Result:

Superscript

Css:

.super {
font-style: normal;
vertical-align: super;
font-size: var(--font-smallest);
}

Result:

Subscript

Css:

.sub {
font-style: normal;
vertical-align: sub;
font-size: var(--font-smallest);
}

Result:

To make it easier to work with these custom formattings I use the combination of Wrap with shortcuts plugin and Editing Toolbar plugin. The first lets you create commands for wrapping text in any tags (including custom classes code as part of the tag), and the second allows to put these commands on the toolbar, you can even add custom icons. It works great together!

By tha way, I wanted to say that your plugin is great and creates so many possibilities! It's just something I come up with lately, but there are definitely much more possible uses. Thank you for your work!
(Sorry if my English is bad).

Still renders in source mode

Describe the bug
Rendering should be reserved for Live Preview and Reader View only, but blocks with custom classes are still rendered in Source view.

Expected behavior
Should be able to (in Source view) see and edit each inline code block as if it were a plain-text editor like notepad.

iPadOS

Describe the bug

On iPadOS, a note which works with Custom Classes does not function as expected. Issue is reproducible on my desktop as well when executing the this.app.emulateMobile(true); command.

To Reproduce

Note:
C - History.md
Vault:
Kovyalo.zip

Screenshots

iPadOS:

macOS:

Error message after running the "emulateMobile" command:

Device (please complete the following information):

• Operating System: iPadOS
• Obsidian version: 1.4.6 (105)

Plugin causes immense slowdowns

Hi!

I encountered a bug with this plugin where it causes a huge slowdown across the entire program. The issue could be fixed with a refresh but would return in a matter of minutes. The issue could also be induced immediately upon the use of code blocks.

To Reproduce
Steps to reproduce the behavior:

The slowdown happened seemingly at random, but there was also a way to induce the slowdown.

Code blocks, for some reason, immediately made the program move at a crawl, and the only fix was removing the block from the note. Performance was this slow in notes, in the native menus, etc. while this issue was in effect.

Please see the video I recorded below for an example of this behavior being induced by code blocks.

The "random" slowdown I mentioned earlier only seemed to be solved by a restart of Obsidian, although it was only a temporary fix. I tried diagnosing if there was a pattern in my behavior that could be causing it, but I didn't notice anything. Reproducing that scenario remains a mystery to me at the time of writing.

Expected behavior
Expected behavior would be not having the slowdown be an issue at all, and being able to use code blocks freely.

Screenshots

2023-03-20_07-37-45.mp4

Device (please complete the following information):

• Operating System: Windows
• Obsidian version: 1.1.16

Additional context
Thanks for your help! Love this plugin so I'm hoping this doesn't mean the end of it for me. If you need any more information from me I'd be happy to provide it.

Exporting to pdf

Describe the bug
When exporting to pdf, the pdf does not show the custom stylings.

To Reproduce

Steps to reproduce the behavior:

1. make a border around any div like normal.
2. export to pdf
3. See error, pdf does not reflect css.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Device (please complete the following information):

• Operating System: [e.g. Linux | Android | MacOS | Windows | IOS]
• Obsidian version:

Additional context
Add any other context about the problem here.

Classes are being assigned to multiple blocks even with a linebreak between

Attached photos of the source mode and the dev panel.

Centering a text doesn't work in live preview

Describe the bug
Using "text-align: center" does not align the the text to center

To Reproduce
Steps to reproduce the behavior:

1. Add to custom.css the following class

.centered-text {
  text-align: center !important;
  background-color: rgba(200, 233, 22, 1.0);
}

2. Add the text this is my random text `class: centered-text`
3. The text is coloured as expected but not in the center but this happens only in live-preview

Expected behavior
The text should be coloured and in the center in live preview

Screenshots

Device (please complete the following information):

• Operating System: MacOS
• Obsidian version: v1.1.16

Breaks when collapsing headings.

Describe the bug
When have two of the same level headings one after the other, the class: <class-name> line above the second heading, when collapsing the first heading, gets interpreted as the last line of the first heading. It doesn't completely break; I'm using a class to change the font color of headings and the color still applies but the font-size changes drastically.

To Reproduce
Steps to reproduce the behavior:

1. Type 2 subsequent headings of the same type (e.g. 2 h2s)
2. Add the custom class to the second heading
3. Collapse the first heading
4. See the second heading change formatting and return to normal when expanding the first heading

Expected behavior
I expected formatting to stay consisting when collapsing the previous heading.

Screenshots

Device (please complete the following information):

• Operating System: MacOS 13.6.3
• Obsidian version: 1.5.3

yaml metadata will render a coleblock

Describe the bug

To Reproduce

1. when i open this plugin, the yaml metadata will render a code block
2. but i found some notes don't have this problem

How to correct the align of columns

Thanks for your great plugin.

When I have this class:

.twocolumns {
columns: 2 12em;
}

I get this result:

What can I do to align the columns correct?

Custom Classes incompatible with Dataview

Great plugin! However, I noticed after using it for a few days that my links in dataview tables/lists no longer function (clicking and page preview hover are both broken). I tried this in a sandbox vault with just dataview and custom-classes plugins installed -- default settings. Not sure if it's an issue on the dataview side or custom-classes, but figured I would report it here to see if you can replicate. You may have to restart Obsidian after enabling the plugins to encounter it.

False Positives on codeblock recognition

Describe the bug
The latest release errors out on some dataview and other miscellaneous code blocks. Likely from the regex changes.

To Reproduce
Steps to reproduce the behavior:
Add the either of the following code blocks to a note:

```
{
	"nodes": [
		{"type":"file","file":"~scratch/~Scratch Note.md","id":"51a302447eea7b0d","x":-40,"y":-398,"width":221,"height":98},
	]
}
```

```dataviewjs
dv.paragraph(
  `${backticks}${mermaidConf}
${list}
${backticks} 
`
);
```

Device (please complete the following information):

• Operating System: Windows 10
• Obsidian version: