{"id":14070188,"url":"https://github.com/mdelobelle/obsidian_supercharged_links","last_synced_at":"2026-02-11T11:23:43.231Z","repository":{"id":37094873,"uuid":"359069311","full_name":"mdelobelle/obsidian_supercharged_links","owner":"mdelobelle","description":"obsidian plugin to add attributes and context menu options to internal links","archived":false,"fork":false,"pushed_at":"2025-12-15T09:16:53.000Z","size":43570,"stargazers_count":642,"open_issues_count":116,"forks_count":40,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-12-18T08:21:50.235Z","etag":null,"topics":["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/mdelobelle.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2021-04-18T07:00:40.000Z","updated_at":"2025-12-17T19:13:34.000Z","dependencies_parsed_at":"2022-07-12T04:00:31.178Z","dependency_job_id":"3ef54480-3931-460d-b11b-f37a0df28b0a","html_url":"https://github.com/mdelobelle/obsidian_supercharged_links","commit_stats":null,"previous_names":[],"tags_count":78,"template":false,"template_full_name":"obsidianmd/obsidian-sample-plugin","purl":"pkg:github/mdelobelle/obsidian_supercharged_links","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdelobelle%2Fobsidian_supercharged_links","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdelobelle%2Fobsidian_supercharged_links/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdelobelle%2Fobsidian_supercharged_links/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdelobelle%2Fobsidian_supercharged_links/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdelobelle","download_url":"https://codeload.github.com/mdelobelle/obsidian_supercharged_links/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdelobelle%2Fobsidian_supercharged_links/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29332412,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-11T06:13:03.264Z","status":"ssl_error","status_checked_at":"2026-02-11T06:12:55.843Z","response_time":97,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["obsidian-plugin"],"created_at":"2024-08-13T07:07:32.780Z","updated_at":"2026-02-11T11:23:43.226Z","avatar_url":"https://github.com/mdelobelle.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"## Supercharged Links\r\n\r\nSupercharged Links is an Obsidian plugin that helps you style the links in your vault based on your notes metadata, such as tags or YAML frontmatter properties. You can automatically add colors, emojis, or other styles to the links, making them more visually appealing and easier to navigate.\r\n\r\n\u003cimg src=https://raw.githubusercontent.com/mdelobelle/obsidian_supercharged_links/master/images/overview-screenshot.png alt=\"drawing\" style=\"width:700px;\"/\u003e\r\n\r\nWhen your notes represent something, like a paper, a location, a person or a day in the week, Supercharged links ensures those notes stand out. Another use case might be to give notes with the `#todo` tag a loud color.\r\nThis visual feedback helps you find the right note back quickly!\r\n\r\n## Installing the plugins\r\n1. Install and enable the Supercharged Links plugin in Obsidian.\r\n2. Install and enable the [Style Settings Plugin](https://github.com/mgmeyers/obsidian-style-settings) in Obsidian. \r\n\r\n## Getting started\r\nThis is the overall workflow for Supercharged Links:\r\n1. In the Supercharged Links settings, create a new selector for the attribute you want to style\r\n2. Choose the type of selector (Tag, Attribute, or Path) and enter the value you want to match.\r\n3. In the Style Settings Plugin settings, set up the style for the selected attribute, such as changing the text color, background color, or by adding emojis.\r\n\r\n## Supported plugins\r\nLive preview, source view, reading mode and the file browser are fully supported in core Obsidian. Other plugins are also supported, as listed below:\r\n\r\nCore plugins:\r\n- Backlinks (including Backlinks in edit mode)\r\n- Outgoing links\r\n- Bases\r\n- Search\r\n- Starred files\r\n- Recent files\r\n- Quick Switcher\r\n- Bookmarks\r\n\r\nCommunity plugins:\r\n- Breadcrumbs (V4+)\r\n- Graph Analysis\r\n- Recent files\r\n- Quick Switcher++\r\n- Another Quick Switcher\r\n- Dataview (inline fields)\r\n- Folder notes\r\n- Similar notes\r\n- Omnisearch\r\n\r\nWant support for another plugin? Create an issue or a pull request here in the repo!\r\n\r\n\r\n## Example workflow\r\nLet's say I have a note about Jim called `Jim.md` with the tag `#person` and some [YAML frontmatter](https://help.obsidian.md/Advanced+topics/YAML+front+matter). \r\n\r\n```md\r\n---\r\nstatus: call soon\r\nage: 42\r\n---\r\n\r\nJim is one of my colleagues\r\n\r\n#person\r\n\r\n```\r\n\r\nI want to change what links to Jim's note look like. In particular, I want links to persons to have a blue background, and I want persons I have to call to have a telephone emoji ☎️  in front: \u003cimg src=\"https://raw.githubusercontent.com/mdelobelle/obsidian_supercharged_links/master/images/phone-jim.png\" style=\"height:30px;vertical-align:bottom\"\u003e.\r\n### Setting up the plugin\r\nTime to set up the plugin to get this work! Let's go to the plugin settings.\r\nFirst, you have to tell the plugin what front-matter attributes to include for your styling in the `Target Attributes for Styling` option on top. Let's add `status` here, which indicates whether we need to call Jim!\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/mdelobelle/obsidian_supercharged_links/master/images/target-status.png\" alt=\"drawing\" style=\"width:500px;\"/\u003e\r\n\r\nNext, we have to tell the plugin to look for notes with the tag `#person`. In the settings, under the Styling header, create a new selector. Under types of selector, select \"Tag\", and add `person` down below:\r\n\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/mdelobelle/obsidian_supercharged_links/master/images/tag-person.png\" alt=\"drawing\" style=\"width:700px;\"/\u003e\r\n\r\nWe also want to add an emoji when notes have `call soon` as its `status`. We will tell the plugin to look for the attribute `status`, and that its value should be `call soon`. Note that this will also look for [inline fields called status from DataView](https://blacksmithgu.github.io/obsidian-dataview/data-annotation/). \r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/mdelobelle/obsidian_supercharged_links/master/images/call-soon.png\" alt=\"drawing\" style=\"width:700px;\"/\u003e\r\n\r\nOne important setting for our use case is that we only enable the \"Add content before link\" option under \"Style options\", since otherwise this style would override the one from the tag `#person`! \r\n\r\nIn addition to styling based on attributes or tags, we can also style notes based on their 'path' (which includes its name, folders and extension). For example, we can style all notes in the folder `dailies`. Make sure to select 'Contains value' under match here instead of 'Exact match':\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/mdelobelle/obsidian_supercharged_links/master/images/path-dailies.png\" alt=\"drawing\" style=\"width:700px;\"/\u003e\r\n\r\n### Time to style!\r\nFirst, make sure you have the [Style Settings Plugin](https://github.com/mgmeyers/obsidian-style-settings) installed and enabled. Then, under settings, navigate to the settings of Style Settings. Now we are ready to style our links! Let's start with setting up our style for notes with the tag `#person`. We will use a white text color, enable the background, and use a nice blue background there. \r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/mdelobelle/obsidian_supercharged_links/master/images/style-person.png\" alt=\"drawing\" style=\"width:700px;\"/\u003e\r\n\r\nNext, let's add emoji's before notes with the call soon status. All we have to do here is copy the ☎️ into the text area \"Prepend text\".\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/mdelobelle/obsidian_supercharged_links/master/images/style-call-soon.png\" alt=\"drawing\" style=\"width:700px;\"/\u003e\r\n\r\nAnd voila!\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/mdelobelle/obsidian_supercharged_links/master/images/result-call-jim.png\" alt=\"drawing\" style=\"width:700px;\"/\u003e\r\n\r\n\r\n## Advanced Styling with CSS\r\nIf you are comfortable with CSS and HTML, you can create even more customized styles for your links using CSS snippets.\r\n\r\n1. Create a CSS snippet in Obsidian by going to Settings \u003e Appearance \u003e CSS Snippets.\r\n2. Write your custom CSS code to style the links based on their data attributes, such as data-link-tags or data-link-status.\r\n3. Save the CSS file and enable the snippet in Obsidian.\r\n\r\n### Example styling with CSS\r\nTo explain how this works, let's explain what this plugin does in the background.\r\n\r\nLet's say I have some link to `[[Jim]]` somewhere.\r\nWithout the plugin activated, the HTML link element would normally look like this: \r\n\r\n```\r\n\u003ca data-href=\"Jim\" href=\"Jim\" class=\"internal-link\" target=\"_blank\" rel=\"noopener\"\u003eJim\u003c/a\u003e\r\n```\r\n\r\nThis does not give any information about what is in the Jim.md note! So, we wouldn't be able to customize it.\r\n\r\nThat's where this plugin comes in: it will add two extra properties in the `\u003ca\u003e` element : `data-link-status` and `data-link-tags`. **Importantly**, these attributes are prefixed with `data-link` so that it will not conflict with other attributes in Obsidian.\r\n\r\nWith the plugin active, the `\u003ca\u003e`element will be supercharged like this: \r\n\r\n```\r\n\u003ca data-href=\"Jim\" href=\"Jim\" class=\"internal-link data-link-text data-link-icon data-link-icon-after\" target=\"_blank\" rel=\"noopener\" data-link-status=\"call soon\" data-link-tags=\"#person\" \u003eJim\u003c/a\u003e\r\n```\r\n\r\n### Style your links with CSS!\r\n\r\nYou can use the flexibility of CSS to customize your links by setting CSS properties in a CSS snippet like `links.css`. To create a CSS snippet, go to the Obsidian settings, then to Appearance and scroll to the CSS snippets section. Click on the little folder icon, then create a new file in the opened folder called `links.css`. \r\n\r\n#### Example CSS snippets\r\n\r\nTo change the color of every appearance of a link to a note based on the tag in the file:\r\n\r\n```css\r\n[data-link-tags*=\"#topic\" i]{\r\n    color: #ff6600 !important;\r\n}\r\n```\r\nThis will target all HTML elements that contain the `data-link-tags` property, that is, all supercharged links.\r\n\r\nTo put a 👤 emoji before the name of each link to a \"category: people\" note:\r\n```css\r\n.data-link-icon[data-link-category$=\"People\" i]::before{\r\n    content: \"👤 \"\r\n}\r\n```\r\n\u003cimg src=\"https://raw.githubusercontent.com/mdelobelle/obsidian_supercharged_links/master/images/link-styling-in-note.png\" style=\"width:500px\"\u003e\r\n\r\nSelecting specifically `.data-link-icon` is required to prevent bugs in Live Preview.\r\n\r\nTo highlight the link in a tag-like blue rounded rectangle when the property `status` is in the note:\r\n\r\n```css\r\n:not(:empty)[data-link-next-status] {\r\n    color: white;\r\n    background-color: rgb(29, 29, 129);\r\n    border-radius: 18px;\r\n    padding: 5px 15px;\r\n}\r\n```\r\n\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/mdelobelle/obsidian_supercharged_links/master/images/link-styling-tag-in-note.png\" style=\"width:500px\"\u003e\r\n\r\nTo display the value of the `status` property at the target file, but _only_ whenever you hover on the link:\r\n\r\n```css\r\n.data-link-icon-after[data-link-status]:hover::after{\r\n    content: \" ► \"attr(data-link-status)\r\n}\r\n```\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/mdelobelle/obsidian_supercharged_links/master/images/link-styling-hover-in-note.png\" style=\"width:500px\"\u003e\r\n\r\n\r\nTo hide the display of links with the tag #hide from your notes (that is, from preview mode and live preview):\r\n```css\r\na.internal-link[data-link-tags *=\"hide\"],\r\n.cm-hmd-internal-link \u003e [data-link-tags *=\"hide\"]{\r\n    visibility: hidden !important;\r\n    display: none;\r\n}\r\n\r\n```\r\n\r\n### CSS custom properties (CSS variables)\r\n\r\nIn addition to adding HTML attributes, Supercharged Links will also add [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) to your links. This can make it easier to use these values directly in CSS.\r\n\r\nAll such properties are prefixed with `--data-link-` -- so a property called \"priority\" would be expressed as `--data-link-priority`.\r\n\r\nAny property whose value begins with `http` will be treated as a URL in CSS -- so if you have `avatar:: https://avatars.githubusercontent.com/u/124363?v=4` in your document, it will be added as `--data-link-avatar: url(https://avatars.githubusercontent.com/u/124363?v=4)`.\r\n\r\n#### Example: using colours\r\n\r\nLet's say you add a property `colour` to a note (for example, with `colour:: #8bc34a` or `colour:: rebeccapurple`). You can then use CSS to apply that colour to your link:\r\n\r\n```css\r\n[data-link-colour] {\r\n    color: var(--colour);\r\n}\r\n```\r\n\r\n#### Example: avatars\r\n\r\nSet up your notes so that each \"person\" note includes a `photo` attribute. Note that this will need to be an HTTP link. For example:\r\n\r\nbarryvan.md\r\n```md\r\n    photo:: https://avatars.githubusercontent.com/u/124363?v=4\r\n    website:: https://barryvan.com.au/\r\n\r\n    ...my notes about barryvan\r\n```\r\n\r\nThen in your CSS:\r\n\r\n```css\r\n/* Used in the editor */\r\n.data-link-icon[data-link-photo^=\"https\" i]:empty {\r\n\twidth: 1.5em;\r\n\theight: 1.5em;\r\n\tdisplay: inline-block;\r\n\tvertical-align: middle;\r\n\tbackground-image: var(--data-link-photo);\r\n\tbackground-size: cover;\r\n\tbox-shadow: 0 1px 4px #0008;\r\n\tborder-radius: 100%;\r\n\tmargin: -0.5em 0.2em -0.5em 0;\r\n}\r\n\r\n/* Used outside the editor -- for example, in search results, tabs, etc. */\r\n.data-link-icon[data-link-photo^=\"https\" i]:not(:empty)::before {\r\n\tcontent: '';\r\n\twidth: 1.5em;\r\n\theight: 1.5em;\r\n\tdisplay: inline-block;\r\n\tvertical-align: middle;\r\n\tbackground-image: var(--data-link-photo);\r\n\tbackground-size: cover;\r\n\tbox-shadow: 0 1px 4px #0008;\r\n\tborder-radius: 100%;\r\n\tmargin: -0.5em 0.2em -0.5em 0;\r\n}\r\n```\r\n\r\n...to produce something like this:\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/mdelobelle/obsidian_supercharged_links/master/images/avatars-basic.png\"\u003e\r\n\r\n### Demos \r\nNOTE: These demos are somewhat outdated.\r\n#### Live Preview\r\n\u003cimg src=\"https://i.imgur.com/8VJm1TJ.gif\" style=\"width:500px\"\u003e\r\n\r\n#### Internal link simple styling\r\nhttps://youtu.be/tyEdsmAQb_4\r\n\r\n#### Multiple properties\r\nhttps://youtu.be/Ofm6gIRP-7o\r\n\r\n#### Multiple values for a property\r\nhttps://youtu.be/aaSZnkEuH4w\r\n\r\n\r\n\r\n## Link context menu extra options\r\nThis plugin also adds context menu items to modifiy target note's frontmatter properties and \"inline fields\" (dataview syntax) by right-clicking on the link.\r\n\r\n**This functionality is deprecated and has been migrated to metadata-menu plugin, available with brat https://github.com/mdelobelle/metadatamenu .**\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdelobelle%2Fobsidian_supercharged_links","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdelobelle%2Fobsidian_supercharged_links","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdelobelle%2Fobsidian_supercharged_links/lists"}