This plugin do two things :

• Add the class .canvas-file to the DOM of each canvas file, and adding the attribute [data-canvas-path="filepath"]
• Allow you to add custom css class to canvas, using a modal input. Obviously, you can also remove the css-class using the plugin, with the settings or the commands modal.

Yeah, that's it.

The plugin will automatically follow file moved, renamed or deleted, so you don't need to change the path in the settings!

The plugin will add two commands to the command modal :

• Add CSS class : Add a css class to the current canvas file
• Remove CSS class : Remove a css class to the current canvas file
• Change the append mode between body & workspace : Allow to choose the behavior of the plugin. By default, the plugin will add the css class to workspace-leaf-content of the canvas file. See below for more information.
  There is 3 commands to allow changing this behavior :
  • quickswitch between body & view-content : Invert the behavior of the actual canvas.
  • Switch to view-content mode : Convert the actual canvas to the workspace-leaf-content behavior.
  • Switch to body mode : Convert the actual canvas to the body behavior.

You can also use the settings to add or remove a css class to the current canvas file.

Moreover, the settings allow you to add a css class for a not-opened canvas file, using the filepath of the file. It allows you to add a css class to a canvas file, even if you don't have it opened.

In the settings, you can also :

• Remove all the css class
• Remove specific css class
• Edit a css class (renaming it)
• Change the adding behavior between body & workspace

The plugin will add, by default, the css class to .workspace-leaf-content of the canvas file, but it can be changed using the settings of the plugin.

This allows a better compatibility when you switch of focused file, because the css class will be conserved. The problem is that the css class is not conserved and exported when you export as an image.

Changing the behavior to the body of Obsidian allow you to export the image conserving the css-class, but if you switch of focused file, the css class will be removed.

My advice :

• Use a macro to switch into body behavior when you use the command for export as an image (you can use Quick Add for that). Note : you need to add a delay, min of 30s, to allowing this to work.
• Create a button with commander to quick switch between the two behaviors.

• Install the plugin throught the Obsidian Community Plugin browser
• Using BRAT using this link : https://github.com/mara-li/obsidian-canvas-css-class
• Manually, with unzipping the last release in your .obsidian/plugins folder.

You can help me to develop the plugin using npm !

• First clone the project on your computer with git clone [email protected]:mara-li/canvas-css-class.git
• cd canvas-css-class
• npm install
• npm run dev to start the developing "in live" with your Obsidian (you need to have the plugin installed in your .obsidian/plugins) to see the changes in live. As it can break your Obsidian Sync, I recommend you to use a test vault.)
• npm run build to build the plugin.

Some notes:

• I use Conventional Commit to generate the commit message, so please respect the format!
• Don't forget to documents your function!

I use i18n to adding translation to the plugin. If you want to help me to translate the plugin, you can do it with :

• Fork the project

• Clone the new fork on your computer or open it with Github Dev (replace the .com with .dev in the URL)

• Create a new branch, called translation

• Clone the file en.ts in the folder plugin/i18n/locales/ and rename it with the language code (for example fr.ts for french)

• Translate the file

• In the index:

  1. Add the import using import <language> from "./locales/<language>";
  2. Before editing the localeMap, you need to know the exact name used by Obsidian for your language. You can find it using <% tp.obsidian.moment.locale() %> if you have templater, or opening the developer console (using CTRL+MAJ+I) and typing moment.locale().
  3. Edit the LocaleMap with the language code and the name of the language. You need to have obsidian-code-language : language (for example fr : french, or for chinese "zh-cn":cn).

• Commit your changes and push it to your fork

• Create a new pull request to the main project

If you find this plugin you can give me some coffee money :