{"id":26217021,"url":"https://github.com/dragonish/obsidian-heading-decorator","last_synced_at":"2025-12-26T23:00:14.169Z","repository":{"id":281785587,"uuid":"945005219","full_name":"dragonish/obsidian-heading-decorator","owner":"dragonish","description":"Implements the decoration of the heading","archived":false,"fork":false,"pushed_at":"2025-03-11T05:34:10.000Z","size":1007,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-11T06:26:45.303Z","etag":null,"topics":["decorator","heading","markdown","obsidian","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/dragonish.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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,"dei":null,"publiccode":null,"codemeta":null},"funding":{"ko_fi":"monogamy"}},"created_at":"2025-03-08T12:41:43.000Z","updated_at":"2025-03-11T06:00:28.000Z","dependencies_parsed_at":"2025-03-11T06:38:38.796Z","dependency_job_id":null,"html_url":"https://github.com/dragonish/obsidian-heading-decorator","commit_stats":null,"previous_names":["dragonish/obsidian-heading-decorator"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dragonish%2Fobsidian-heading-decorator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dragonish%2Fobsidian-heading-decorator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dragonish%2Fobsidian-heading-decorator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dragonish%2Fobsidian-heading-decorator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dragonish","download_url":"https://codeload.github.com/dragonish/obsidian-heading-decorator/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243213981,"owners_count":20254902,"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":["decorator","heading","markdown","obsidian","obsidian-plugin"],"created_at":"2025-03-12T12:18:35.611Z","updated_at":"2025-12-26T23:00:14.153Z","avatar_url":"https://github.com/dragonish.png","language":"TypeScript","funding_links":["https://ko-fi.com/monogamy"],"categories":[],"sub_categories":[],"readme":"# Heading Decorator\n\n**English** | [简体中文](./README-zh_CN.md) | [繁體中文](./README-zh_TW.md)\n\n## Introduction\n\nThis is a plugin for [Obsidian](https://obsidian.md).\n\nImplement displaying specific content around headings based on their levels.\n\nThis plugin supports optional decoration for reading view, editing view (*Live Preview* and *Source mode*), *[Outline](https://help.obsidian.md/plugins/outline)*, *[Quiet Outline](https://github.com/guopenghui/obsidian-quiet-outline)* and *[Headings in Explorer](https://github.com/patrickchiang/obsidian-headings-in-explorer)* plugin. This plugin does not modify any note content, only decorates the heading section based on the existing note content.\n\n## Preview\n\nIn *Live Preview*:\n\n![Preview](images/preview.jpg)\n\nThe interaction between the decorator and the collapse button:\n\n![Collapse Button Interaction](images/collapse-button-interaction.gif)\n\n## Settings\n\n### Metadata keyword\n\nThe key name that reads the enabled status from the [properties](https://help.obsidian.md/Editing+and+formatting/Properties). The default value is: `heading`. Usage reference: [Enabled status of notes](#enabled-status-of-notes).\n\n### Enabled\n\nThe plugin supports configure heading decorator for each editor mode. You can control the effect range:\n\n- **Enabled in reading view**: Allow to decorate the heading under the *Reading* view.\n- **Enabled in live preview**: Allow to decorate the heading under the *Live Preview*.\n- **Enabled in source mode**: Allow to decorate the heading under the *Source mode*.\n- **Enabled in outline plugin**: Allow to decorate the heading under the *Outline* plugin.\n- **Enabled in \"Quiet Outline\" plugin**: Allow to decorate the heading under the *[Quiet Outline](https://github.com/guopenghui/obsidian-quiet-outline)* plugin.\n- **Enabled in \"Headings in Explorer\" plugin**: Allow to decorate the heading under the *[Headings in Explorer](https://github.com/patrickchiang/obsidian-headings-in-explorer)* plugin.\n\nIn addition, you can enable the default status of each note within the *Config* subpage. It mainly works together with [Enabled status of notes](#enabled-status-of-notes).\n\n### Effect\n\nControl the display effect of the decorator.\n\n- **Ordered**: Toggle this setting to enable the decoration of headings as an [ordered](#ordered) or [unordered](#unordered) list.\n- **Opacity**: Set the opacity of the heading decorator. The value is the form of percentage.\n- **Position**: Set the position of the heading decorator. You can configure the content to appear before or after the heading.\n- **Maximum level recognized**: Specify the maximum level of headings to be recognized, ignoring headings above this level.\n\nHere are some examples of the differences between different positions:\n\n| Before the heading | Before the heading (inside) | After the heading |\n| :----------------: | :-------------------------: | :---------------: |\n| ![before](images/before.jpg) | ![before-inside](images/before-inside.jpg) | ![after](images/after.jpg) |\n\nHere are examples of different recognized maximum levels:\n\n| The maximum level recognized is `6` | The maximum level recognized is `4` |\n| :---------------------------------: | :---------------------------------: |\n| ![max-6](images/max-6.jpg) | ![max4](images/max-4.jpg) |\n\n### Ordered\n\nSimilar to the effect displayed in the [Preview](#preview).\n\nYou can control the counter style type and delimiter. There are two special types of counter styles:\n\n- **Custom list styles**: Set custom list styles for ordered list. Using spaces to separate entries.\n- **Specified string**: Set a specified string for ordered list.\n\nFor example:\n\n| Decimal numbers | Custom List Styles (using `Ⓐ Ⓑ Ⓒ`) | Specified String (using `#` with empty delimiter) |\n| :-------------: | :----------------------------------: | :-----------------------------------------------: |\n| ![Decimal numbers](images/decimal.jpg) | ![Custom list styles](images/custom-list-styles.jpg) | ![Specified string](images/specified-string.jpg) |\n\n#### Allow zero level\n\nFor the *Allow zero level* setting, if the next heading is more than one level higher, the omitted level is zero instead of one. For example:\n\n| Default | Allow zero level |\n| :-----: | :--------------: |\n| ![Default](images/omitted.jpg) | ![Allow zero level](images/zero.jpg) |\n\n#### Based on the existing highest level\n\nFor the *Based on the existing highest level* setting, use the highest level of headings in the note as the base for ordered list. For example:\n\n| Default | Based on the existing highest level |\n| :-----: | :----------------------------------: |\n| ![Default](images/heading-2.jpg) | ![Based on the existing highest level](images/based-on-existing.jpg) |\n\n#### Always ignore the top-level headings\n\nExclude the top-level heading when building ordered lists. controlled by the *Maximum number of ignored levels* option. For example:\n\n| Default | Enabled (Maximum number of ignored levels set to `2`) |\n| :-----: | :----------------------------------------------------:|\n| ![Default](images/default.jpg) | ![Always ignore the top-level headings](images/always.jpg) |\n\n#### Ignore the single heading at the top-level\n\nFor the *Ignore the single heading at the top-level* setting, if the top-level has only a single heading, exclude it when building an ordered list. controlled by the *Maximum number of ignored levels* option. This setting contains *Based on the existing highest level*, but it deals with more \"aggressive\". For example:\n\n| Default | Enabled (Maximum ignored levels: `1`) | Enabled  (Maximum ignored levels: `6`) |\n| :-----: | :-----------------------------------: | :------------------------------------: |\n| ![Default](images/no-ignore.jpg) | ![Ignore the single heading at the top-level](images/ignore-with-number-1.jpg) | ![The maximum number of ignored is 1](images/ignore-with-number-6.jpg) |\n\n### Unordered\n\nDirectly decorate the heading according to the level. For example:\n\n| Ordered (Decimal numbers) | Unordered (using `H1 H2 H3 H4 H5 H6`) |\n| :-----: | :--------------: |\n| ![Ordered](images/ordered.jpg) | ![Unordered](images/unordered.jpg) |\n\n### Other settings for reading view\n\n#### Render policy for reading view\n\nWhen editing note content, the render policy used by the heading decorator in the reading view.\n\n- **Partial**: Rerender active heading decorator after the update.\n- **Full**: Rerender all heading decorators after the update.\n\n### Other settings for source mode\n\n#### Hide number signs on inactive lines\n\nHide number signs (`#`) on inactive lines similar to live preview.\n\n### Blocklist\n\n#### Folder blocklist\n\nDisables the heading decorator in notes within the specified folder. For notes that are on the blocklist, you can still use [Enabled status of notes](#enabled-status-of-notes).\n\n#### Note name regex blocklist\n\nDisables the heading decorator in notes whose note name matches the specified regular expression. The format uses [JavaScript regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions), for example: `/^daily.*/i`. For notes that are on the blocklist, you can still use [Enabled status of notes](#enabled-status-of-notes).\n\n## Enabled status of notes\n\nThis plugin allows for configure the enabled status based on specific fields in the note [properties](https://help.obsidian.md/Editing+and+formatting/Properties). You can individually control the enabled status of a note.\n\nYou can specify the status after the configured property [keyword](#metadata-keyword):\n\n```yaml\n---\nheading: false\n---\n```\n\nThe values `true`, `yes`, `on` or `1` indicates enabled; the values `false`, `no`, `off` or `0` indicates disabled. Other values are equivalent to undeclared.\n\nYou can also use the following subfields to specify the status of a specific mode:\n\n- **reading**: the status of the decorator in the reading view.\n- **preview**: the status of the decorator in the live preview.\n- **source**: the status of the decorator in the source mode.\n- **outline**: the status of the decorator in the outline plugin.\n- **quiet-outline**: the status of the decorator in the \"Quiet Outline\" plugin.\n- **file-explorer**: the status of the decorator in the \"Headings in Explorer\" plugin.\n- **all**: the status of the decorator in all modes.\n\nFor example, you can set all other modes to be disabled and enable the decorator in the reading view alone:\n\n```yaml\n---\nheading:\n  all: false\n  reading: true\n---\n```\n\nIf you prefer to use Obsidian's default property `cssclasses`, you can also fill in `cssclasses` with some equivalent class names:\n\n- reading: `enable-reading-heading`/`disable-reading-heading`\n- preview: `enable-preview-heading`/`disable-preview-heading`\n- source: `enable-source-heading`/`disable-source-heading`\n- outline: `enable-outline-heading`/`disable-outline-heading`\n- quiet-outline: `enable-quiet-outline-heading`/`disable-quiet-outline-heading`\n- file-explorer: `enable-file-explorer-heading`/`disable-file-explorer-heading`\n- all: `enable-heading`/`disable-heading`\n\nFor example, a value equivalent to the above example:\n\n```yaml\n---\ncssclasses:\n  - disable-heading\n  - enable-reading-heading\n---\n```\n\n## Custom decorator styles\n\nYou can customize the heading decorator style by CSS classes. For decorators in the editor, `.custom-heading-decorator` can be used. Or for specific editor modes:\n\n- Reading view: `.reading-custom-heading-decorator`.\n- Live Preview: `.preview-custom-heading-decorator`.\n- Source mode: `.source-custom-heading-decorator`.\n\nFor decorators in other plugins, it is necessary to combine pseudo-element keywords:\n\n- Outline: `.outline-custom-heading-decorator::before` or `.outline-custom-heading-decorator::after`.\n- Quiet Outline: `.quiet-outline-custom-heading-decorator::before` or `.quiet-outline-custom-heading-decorator::after`.\n- Headings in Explorer: `.file-explorer-custom-heading-decorator::before` or `.file-explorer-custom-heading-decorator::after`.\n\nFor example, make all the decorators display in green:\n\n```css\n.custom-heading-decorator,\n.outline-custom-heading-decorator::before,\n.outline-custom-heading-decorator::after,\n.quiet-outline-custom-heading-decorator::before,\n.quiet-outline-custom-heading-decorator::after,\n.file-explorer-custom-heading-decorator::before,\n.file-explorer-custom-heading-decorator::after {\n  color: green;\n}\n```\n\nIn addition, the plugin provides a set of CSS variables for customizing the spacing of decorators:\n\n- `--reading-heading-decorator-margin`: the margin of the heading decorator in the reading view.\n- `--reading-heading-decorator-translate`: the translating vector value of the heading decorator in the reading view.\n- `--preview-heading-decorator-margin`: the margin of the heading decorator in the live preview.\n- `--preview-heading-decorator-translate`: the translating vector value of the heading decorator in the live preview.\n- `--source-heading-decorator-margin`: the margin of the heading decorator in the source mode.\n- `--source-heading-decorator-translate`: the translating vector value of the heading decorator in the source mode.\n- `--outline-heading-decorator-margin`: the margin of the heading decorator in the outline plugin.\n- `--quiet-outline-heading-decorator-margin`: the margin of the heading decorator in the \"Quiet Outline\" plugin.\n- `--file-explorer-heading-decorator-margin`: the margin of the heading decorator in the \"Headings in Explorer\" plugin.\n\nFor example, to adjust the spacing in the reading view to `8px`:\n\n```css\nbody {\n  --reading-heading-decorator-margin: 8px;\n}\n```\n\n## Credits\n\n- [@jsamr/counter-style](https://github.com/jsamr/react-native-li/tree/master/packages/counter-style#readme)\n\n## License\n\n[MIT](/LICENSE) license\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdragonish%2Fobsidian-heading-decorator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdragonish%2Fobsidian-heading-decorator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdragonish%2Fobsidian-heading-decorator/lists"}