{"id":13870198,"url":"https://github.com/LilaRest/obsidian-custom-classes","last_synced_at":"2025-07-15T20:31:49.903Z","repository":{"id":65502984,"uuid":"592291636","full_name":"LilaRest/obsidian-custom-classes","owner":"LilaRest","description":"A minimal Obsidian plugin that allows you to add your own HTML classes to chosen Markdown elements directly from your notes.","archived":false,"fork":false,"pushed_at":"2023-02-25T22:43:55.000Z","size":687,"stargazers_count":72,"open_issues_count":11,"forks_count":3,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-08-06T21:23:33.621Z","etag":null,"topics":["classes","html","markdown","obsidian-md","obsidian-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LilaRest.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG-until-v2.0.0.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"custom":["https://lila.rest/donations"]}},"created_at":"2023-01-23T12:15:00.000Z","updated_at":"2024-08-06T10:01:38.000Z","dependencies_parsed_at":"2024-01-16T08:21:58.719Z","dependency_job_id":null,"html_url":"https://github.com/LilaRest/obsidian-custom-classes","commit_stats":null,"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LilaRest%2Fobsidian-custom-classes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LilaRest%2Fobsidian-custom-classes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LilaRest%2Fobsidian-custom-classes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LilaRest%2Fobsidian-custom-classes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LilaRest","download_url":"https://codeload.github.com/LilaRest/obsidian-custom-classes/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226068295,"owners_count":17568733,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["classes","html","markdown","obsidian-md","obsidian-plugin"],"created_at":"2024-08-05T20:01:33.771Z","updated_at":"2024-11-23T16:31:19.858Z","avatar_url":"https://github.com/LilaRest.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003eObsidian Custom Classes\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\t\u003cimg alt=\"GitHub Workflow Status\" src=\"https://img.shields.io/github/actions/workflow/status/LilaRest/obsidian-custom-classes/semantic-release.yml\"\u003e\n\t\u003cimg alt=\"GitHub Downloads\" src=\"https://img.shields.io/github/downloads/LilaRest/obsidian-custom-classes/total?color=%23ddccee\"\u003e\n\t\u003cimg alt=\"GitHub License\" src=\"https://img.shields.io/github/license/LilaRest/obsidian-custom-classes?color=%235588ff\"\u003e\n\t\u003cimg alt=\"Semantic-release: angular\" src=\"https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release\"\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\u003cb\u003eA minimal Obsidian plugin that allows you to add your own HTML\u003cbr\u003eclasses to chosen Markdown blocks directly from your notes.\u003c/b\u003e\u003c/p\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n## Usage\nYou can add custom classes to :\n\u003cul\u003e\n\u003cli\u003e\u003cp\u003e\u003cb\u003eentire blocks\u003c/b\u003e \u003csamp\u003e(e.g. a whole list)\u003c/samp\u003e \u0026rarr; By inserting \u003ccode\u003e\u003csamp\u003e`class: \u0026lt;customClass\u0026gt;`\u003c/samp\u003e\u003c/code\u003e on the line right before it\u003c/p\u003e\n\u003ctable align=\"center\"\u003e\n\u003cthead\u003e\n\u003ctd align=\"center\"\u003e\u003cb\u003eThis markdown\u003c/b\u003e\u003cbr/\u003e\u003csamp\u003e(Edit mode)\u003c/samp\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cb\u003eWill be rendered\u003c/b\u003e\u003cbr/\u003e\u003csamp\u003e(Live Preview / Read mode)\u003c/samp\u003e\u003c/td\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctd\u003e\u003cp\u003e\n\n```markdown\n`class: fancy-list`\n- Lorem ipsum\n- Dolor\n- Amet consectetur             \n```\n\u003c/p\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cp\u003e\n\n```html\n\u003cdiv class=\"fancy-list\"\u003e\n  \u003cul\u003e\n    \u003cli\u003eLorem ipsum\u003c/li\u003e\n    \u003cli\u003eDolor sit\u003c/li\u003e\n    \u003cli\u003eAmet consectetur\u003c/li\u003e            \n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\u003c/p\u003e\u003c/td\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\t\u003c/li\u003e\n  \u003cbr\u003e\n\u003cli\u003e\u003cp\u003e\u003cb\u003especific elements\u003c/b\u003e \u003csamp\u003e(e.g. a list item)\u003c/samp\u003e \u0026rarr; By inserting \u003ccode\u003e\u003csamp\u003e`class: \u0026lt;customClass\u0026gt;`\u003c/samp\u003e\u003c/code\u003e inside of it\u003c/p\u003e\n  \n\u003ctable align=\"center\"\u003e\n\u003cthead\u003e\n\u003ctd align=\"center\"\u003e\u003cb\u003eThis markdown\u003c/b\u003e\u003cbr/\u003e\u003csamp\u003e(Edit mode)\u003c/samp\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cb\u003eWill be rendered\u003c/b\u003e\u003cbr/\u003e\u003csamp\u003e(Live Preview / Read mode)\u003c/samp\u003e\u003c/td\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctd\u003e\u003cp\u003e\n\n```markdown\n- Lorem ipsum\n- Dolor sit `class: fancy-item`\n- Amet consectetur\n```\n\u003c/p\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cp\u003e\n\n```html\n\u003cdiv\u003e\n  \u003cul\u003e\n    \u003cli\u003eLorem ipsum\u003c/li\u003e\n    \u003cli class=\"fancy-item\"\u003eDolor sit\u003c/li\u003e\n    \u003cli\u003eAmet consectetur\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\u003c/p\u003e\u003c/td\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\t\u003c/li\u003e\n  \u003cbr\u003e\n  \u003c/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cb\u003eor even both :\u003c/b\u003e\n\t\n\u003ctable align=\"center\"\u003e\n\u003cthead\u003e\n\u003ctd align=\"center\"\u003e\u003cb\u003eThis markdown\u003c/b\u003e\u003cbr/\u003e\u003csamp\u003e(Edit mode)\u003c/samp\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cb\u003eWill be rendered\u003c/b\u003e\u003cbr/\u003e\u003csamp\u003e(Live Preview / Read mode)\u003c/samp\u003e\u003c/td\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctd\u003e\u003cp\u003e\n\n```markdown\n`class: fancy-list`\n- Lorem ipsum\n- Dolor `class: fancy-item` sit \n- Amet consectetur\n```\n\u003c/p\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cp\u003e\n\n```html\n\u003cdiv class=\"fancy-list\"\u003e\n  \u003cul\u003e\n    \u003cli\u003eLorem ipsum\u003c/li\u003e\n    \u003cli class=\"fancy-item\"\u003eDolor sit\u003c/li\u003e\n    \u003cli\u003eAmet consectetur\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\u003c/p\u003e\u003c/td\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\t\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cbr\u003e\n\n\u003e #### ℹ️ \u0026nbsp; For advanced usages and/or informations see the [FAQ section](#-FAQ).\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n## Demonstrations\nHere are some ways to use this plugin that may inspire you for your workflows.\n\n\u003cins\u003e\u003cb\u003eAdd a class to :\u003c/b\u003e\u003c/ins\u003e\n\n\u003col\u003e\n\u003cli\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003eA whole table\u003c/b\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\u003ctable align=\"center\"\u003e\n\u003cthead\u003e\n\u003ctd align=\"center\"\u003e\u003cb\u003eThis markdown\u003c/b\u003e\u003cbr/\u003e\u003csamp\u003e(Edit mode)\u003c/samp\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cb\u003eWill be rendered\u003c/b\u003e\u003cbr/\u003e\u003csamp\u003e(Live Preview / Read mode)\u003c/samp\u003e\u003c/td\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctd\u003e\u003cp\u003e\n\n```markdown\n`class: mytable`\n| AAA | BBB | CCC |\n| --- | --- | --- |\n| 111 | 222 | 333 |\n```\n\u003c/p\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cp\u003e\n\n```html\n\u003cdiv class=\"mytable\"\u003e\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eAAA\u003c/th\u003e\n      \u003cth\u003eBBB\u003c/th\u003e\n      \u003cth\u003eCCC\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e111\u003c/td\u003e\n      \u003ctd\u003e222\u003c/td\u003e\n      \u003ctd\u003e333\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\u003c/div\u003e  \n```\n\u003c/p\u003e\u003c/td\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n  \u003cbr\u003e\n\u003c/details\u003e\n\u003c/li\u003e\n\n\u003cli\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003eA table cell\u003c/b\u003e\u003c/summary\u003e\n  \u003cbr\u003e\n\u003ctable align=\"center\"\u003e\n\u003cthead\u003e\n\u003ctd align=\"center\"\u003e\u003cb\u003eThis markdown\u003c/b\u003e\u003cbr/\u003e\u003csamp\u003e(Edit mode)\u003c/samp\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cb\u003eWill be rendered\u003c/b\u003e\u003cbr/\u003e\u003csamp\u003e(Live Preview / Read mode)\u003c/samp\u003e\u003c/td\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctd\u003e\u003cp\u003e\n\n```markdown\n| AAA | BBB                  | CCC |\n| --- | -------------------- | --- |\n| 111 | 222 `class: my-cell` | 333 |\n```\n\u003c/p\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cp\u003e\n\n```html\n\u003cdiv\u003e\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eAAA\u003c/th\u003e\n      \u003cth\u003eBBB\u003c/th\u003e\n      \u003cth\u003eCCC\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e111\u003c/td\u003e\n      \u003ctd class=\"my-cell\"\u003e222\u003c/td\u003e\n      \u003ctd\u003e333\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\u003c/div\u003e  \n```\n\u003c/p\u003e\u003c/td\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n  \u003cbr\u003e\n\u003c/details\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003eA Dataview query\u003c/b\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\u003ctable align=\"center\"\u003e\n\u003cthead\u003e\n\u003ctd align=\"center\"\u003e\u003cb\u003eThis markdown\u003c/b\u003e\u003cbr/\u003e\u003csamp\u003e(Edit mode)\u003c/samp\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cb\u003eWill be rendered\u003c/b\u003e\u003cbr/\u003e\u003csamp\u003e(Live Preview / Read mode)\u003c/samp\u003e\u003c/td\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctd\u003e\u003cp\u003e\n\n````markdown\n`class: my-dv-list`\n```dataview\nLIST\nWHERE creation\n```\n````\n\u003c/p\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cp\u003e\n\n```html\n\u003cdiv class=\"my-dv-list\"\u003e\n  \u003cdiv class=\"block-language-dataview\"\u003e\n    \u003cul class=\"dataview list-view-ul\"\u003e\n      // The results of your query \n      // \u003cli\u003e...\u003c/li\u003e\n      // ...\n    \u003c/ul\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\u003c/p\u003e\u003c/td\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n  \u003cbr\u003e\n\u003c/details\u003e\n\u003c/li\u003e\n\n\u003cli\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003eA heading\u003c/b\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\u003ctable align=\"center\"\u003e\n\u003cthead\u003e\n\u003ctd align=\"center\"\u003e\u003cb\u003eThis markdown\u003c/b\u003e\u003cbr/\u003e\u003csamp\u003e(Edit mode)\u003c/samp\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cb\u003eWill be rendered\u003c/b\u003e\u003cbr/\u003e\u003csamp\u003e(Live Preview / Read mode)\u003c/samp\u003e\u003c/td\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctd\u003e\u003cp\u003e\n\n```markdown\n`class: important-title`\n### My super heading\n```\n\u003c/p\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cp\u003e\n\n```html\n\u003cdiv class=\"important-title\"\u003e\n  \u003ch3\u003eMy super heading\u003c/h3\u003e\n\u003c/div\u003e\n```\n\u003c/p\u003e\u003c/td\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n  \u003cbr\u003e\n\u003c/details\u003e\n\u003c/li\u003e\n\n\u003cli\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003eA blockquote\u003c/b\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\u003ctable align=\"center\"\u003e\n\u003cthead\u003e\n\u003ctd align=\"center\"\u003e\u003cb\u003eThis markdown\u003c/b\u003e\u003cbr/\u003e\u003csamp\u003e(Edit mode)\u003c/samp\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cb\u003eWill be rendered\u003c/b\u003e\u003cbr/\u003e\u003csamp\u003e(Live Preview / Read mode)\u003c/samp\u003e\u003c/td\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctd\u003e\u003cp\u003e\n\n```markdown\n`class: interesting-quote`\n\u003e Lorem ipsum dolor sit amet\n```\n\u003c/p\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cp\u003e\n\n```html\n\u003cdiv class=\"interesting-quote\"\u003e\n  \u003cblockquote\u003e\n    \u003cp\u003eLorem ipsum dolor sit amet\u003c/p\u003e\n  \u003c/blockquote\u003e\n\u003c/div\u003e\n```\n\u003c/p\u003e\u003c/td\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n  \u003cbr\u003e\n\u003c/details\u003e\n\u003c/li\u003e\n\n\u003cli\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003eAn inline formatting\u003c/b\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\u003ctable align=\"center\"\u003e\n\u003cthead\u003e\n\u003ctd align=\"center\"\u003e\u003cb\u003eThis markdown\u003c/b\u003e\u003cbr/\u003e\u003csamp\u003e(Edit mode)\u003c/samp\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cb\u003eWill be rendered\u003c/b\u003e\u003cbr/\u003e\u003csamp\u003e(Live Preview / Read mode)\u003c/samp\u003e\u003c/td\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctd\u003e\u003cp\u003e\n\n```markdown\nI'm a **bold text `class: big`** and _`.small` me an italic one_\n```\n\u003c/p\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cp\u003e\n\n```html\n\u003cp\u003eI'm a \u003cstrong class=\"big\"\u003ebold text\u003c/strong\u003e and \u003cem class=\"small\"\u003eme an italic one\u003c/em\u003e\u003c/p\u003e\n```\n\u003c/p\u003e\u003c/td\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n  \u003cbr\u003e\n\u003c/details\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n  \n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n## Showcase / Integrations\nThat section displays some example of how people have integrated the _Custom Classes_ plugin in their workflows.\nFeel free to share yours by [opening an issue](https://github.com/LilaRest/obsidian-custom-classes/issues/new).\n\n\u003col\u003e\n\t\u003cli\u003e\u003ch3\u003eThe Lila's frontmatter :cherry_blossom:\u003c/h3\u003e\n  \nHere the _Custom Classes_ plugin is used to render a Markdown unordered list (`ul`) as a clean frontmatter block.\n\n\u0026rarr; Source: https://forum.obsidian.md/t/a-frontmatter-that-finally-supports-links-lilas-frontmatter/53087\n\t\n\u003ctable align=\"center\"\u003e\n\u003cthead\u003e\n\u003ctd align=\"center\"\u003e\u003cb\u003eThis markdown\u003c/b\u003e\u003cbr/\u003e\u003csamp\u003e(Edit mode)\u003c/samp\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cb\u003eWill be rendered\u003c/b\u003e\u003cbr/\u003e\u003csamp\u003e(Live Preview / Read mode)\u003c/samp\u003e\u003c/td\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctd\u003e\u003cp\u003e\n\n```markdown\n`class:meta`\n- creation:: 2023-01-21T18:55:12\n- author:: [[John Doe]]\n- parents:: [[Note]], [[Another note]]\n- status:: #MayBePartial\n```\n\u003c/p\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cp\u003e\n\n| Theme | |\n| -- | -- |\n| Dark | ![](https://forum.obsidian.md/uploads/default/original/3X/1/4/1418a3659b033fcf8d925105d6a3da3c6b9984fc.gif) |\n| Light | ![](https://forum.obsidian.md/uploads/default/original/3X/3/5/35b209dfa79a2b3df13166e9ddd6d1b208480fca.gif) |\n\n\u003c/p\u003e\u003c/td\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n## ❔ FAQ\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003eWhy not to use \u003ccode\u003e\u0026lt;div class=\"my-custom-class\"\u0026gt;\u003c/code\u003e instead ?\u003c/b\u003e\u003c/summary\u003e\n  \u003cblockquote align=\"center\"\u003e\n  \u003cbr\u003e\n    \n  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.\n    \n  **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 !** :tada:\n  \u003c/blockquote\u003e\n  \u003cbr\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003eWill it works in other Markdown editors ?\u003c/b\u003e\u003c/summary\u003e\n  \u003cblockquote align=\"center\"\u003e\n  \u003cbr\u003e\n    \n  Since this plugin is exclusive to Obsidian, the custom classes will not be applied in other editors.\n    \n  However since the custom classes blocks (``` `class: ...` ```) are simple Markdown inline code-blocks, they will properly render as code blocks in other Markdown editors.\n  \u003c/blockquote\u003e\n  \u003cbr\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003eIs it possible to add multiple classes at once ?\u003c/b\u003e\u003c/summary\u003e\n  \u003cblockquote align=\"center\"\u003e\n  \u003cbr\u003e\n    \n  Yes, just separate each class by a comma :\n\u003ctable align=\"center\"\u003e\n\u003cthead\u003e\n\u003ctd align=\"center\"\u003e\u003cb\u003eThis markdown\u003c/b\u003e\u003cbr/\u003e\u003csamp\u003e(Edit mode)\u003c/samp\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cb\u003eWill be rendered\u003c/b\u003e\u003cbr/\u003e\u003csamp\u003e(Live Preview / Read mode)\u003c/samp\u003e\u003c/td\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctd\u003e\u003cp\u003e\n\n```markdown\n`class: first, second, third-one`\nI'm the paragraph and you ?          \n```\n\u003c/p\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cp\u003e\n\n```html\n\u003cdiv class=\"first second third-one\"\u003e\n  \u003cp\u003eI'm the paragraph and you ?\u003c/p\u003e\n\u003c/div\u003e\n```\n\u003c/p\u003e\u003c/td\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n  \u003c/blockquote\u003e\n  \u003cbr\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003eDoes it works in Live Preview mode ?\u003c/b\u003e\u003c/summary\u003e\n  \u003cblockquote align=\"center\"\u003e\n  \u003cbr\u003e\n  \n  Yes the Live Preview mode is fully supported by this plugin.\n  \n  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.\n  \u003c/blockquote\u003e\n  \u003cbr\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003eThe \u003ccode\u003eclass:\u003c/code\u003e prefix is too long, is there any shorthand version ?\u003c/b\u003e\u003c/summary\u003e\n  \u003cblockquote align=\"center\"\u003e\n  \u003cbr\u003e\n  \n  Yes the _Custom Classes_ plugin will also consider as custom classes block every inline code-block that starts with `cls:`or with `.`\n  \n  So ``` `cls: wow` ``` and ``` `.wow` ``` are equivalent to ``` `class: wow` ```.\n  \u003c/blockquote\u003e\n  \u003cbr\u003e\n\u003c/details\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n## Installation\n1) Go to **Community Plugins** section of your Obsidian's settings\n2) Click on **Browse** and search for \"Custom classes\"\n3) Select the _Custom Classes_ plugin and click on **Install**\n4) Once installed, click on **Enable**\n5) Enjoy !\n\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n## Inspiration\nThis plugin is originally inspired by the [Obsidian Stylist](https://github.com/ixth/obsidian-stylist) plugin but has been entirely rewritten to :\n- focus exclusively on adding custom HTML classes,\n- support the Live Preview mode,\n- fix some majors bugs (e.g. classes were not properly appended if the targetted block was modified and then re-rendered).\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n## Contributing\nSee [CONTRIBUTING.md](https://github.com/LilaRest/obsidian-custom-classes/blob/main/CONTRIBUTING.md).\n","funding_links":["https://lila.rest/donations"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLilaRest%2Fobsidian-custom-classes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLilaRest%2Fobsidian-custom-classes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLilaRest%2Fobsidian-custom-classes/lists"}