Skip to content

Tags

feature - tags

Convert obsidian tags to mkdocs-material search

Usage

This is just an #obsidian tag. Click to go to the search bar

This is just an obsidian tag. Click to go to the search bar

How to activate

TLDR

see this PR and apply to your project

By default obsidian tags are just shown as bold text. Obsidian style can be activated by using the following css file, that has to be activated inside the mkdocs.yml.

.hash {
  background-color: #f3eefd;
  border-radius: 20px;
  padding: 5px;
  font-weight: normal;
}

[data-md-color-scheme="slate"] .hash {
  background-color: #292433;
}

Activating this inside the mkdocs.yml

extra_css:
  - assets/css/obsidian_tags.css

By using the following javascript, the search menu will be opened by clicking the tags.

$('.hash').each(function() {
  var link = $(this).html();
  $(this).contents().wrap('<a href="?q='+link+'">#</a>');
});

This have to be activated inside the mkdocs.yml.

extra_javascript:
  - https://code.jquery.com/jquery-3.7.1.min.js
  - assets/javascript/obsidian_tags.js

Comments