Syntax
The following syntaxes are supported:
#?Syntax Reference
Basic
The syntax is the same as what Internal links - Obsidian Help supported and simple to write:
[[Bi-directional Links Example Page]]The Bi-directional Links Example Page is the file name of the target page. The rendered result will be:
Bi-directional Links Example Page
Hash tags
What is the targeted title? How does this feature work?
When you click on the link in the outline on the right or directly click the link button on the left of the title, pay attention to the changes in the address bar.
You will find that there is a # symbol in the URL, followed by an ID, which is the ID of the targeted title.
The ID of the targeted title mentioned here is actually the ID of the HTML element, so in theory, not only can the framework and the browser be required to scroll the title element into the viewport, but also other valid elements with matching HTML IDs.
This kind of element can be found by pressing F12 to open the developer tool, and then enter
document.querySelector('#why')in the console to find it. This code will return an HTML element, which is what we call the "targeted title".
We support this feature ass well, syntax reference here: Link to a heading in a note - Internal links - Obsidian Help
TIP
Such functionalities is quite useful when you want to jump to a specific section once the page is opened and loaded.
With the use of the Blinking highlight targeted heading VitePress plugin we provided, hence enhanced abilities and improved reading experience. The targeted title by hash tag will be highlighted with a blinking effect once the page is loaded.
[[Bi-directional Links Example Page#heading-id]]The section-2 is the hash tag of the target page. By default, the hash tag will be the id attribute of the heading element.
The rendered result will be:
Bi-directional Links Example Page
Query strings
Beyond the default behaviors that Obsidian supported, we also support query strings in the link target. This is useful when you have a inner Vue component or JavaScript logic that can handle the query strings as part of the automation:
[[Bi-directional Links Example Page?query=string]]The rendered result will be:
Bi-directional Links Example Page
Image
![[foxtail field.jpg]]Demo
Custom Text
[[Bi-directional Links Example Page]]Demo
Use Markdown markup in custom text
[[Some Full Path Reference to Your Page|`Code Block (Before)` Middle `Code Block (After)`]]
[[Some Full Path Reference to Your Page|**Bold Before** Middle **Bold After**]]
[[Some Full Path Reference to Your Page|*Italic Before* Middle *After*]]
[[Some Full Path Reference to Your Page|~~Strikethrough Before~~ Middle ~~Strikethrough After~~]]Code Block (Before) Middle Code Block (After)
Bold (Before) Middle Bold (After)
Italic (Before) Middle Italic (After)
Strikethrough (Before) Middle Strikethrough (After)
Use HTML markup in custom text
[[pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Page|<span style="color: red;">Custom HTML</span>]]
[[pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Page|<span style="color: red;">Custom HTML</span> Middle <span style="color: blue;">Custom HTML</span>]]Custom HTML Middle Custom HTML
Compatible with markdown-it-attrs to modify HTML attributes
Change color
[[Bi-directional Links Example Page]]{style="color: red;"}Demo
Bi-directional Links Example Page
Change class name
[[Bi-directional Links Example Page]]{.custom-class}Demo
Bi-directional Links Example Page
Absolute path
[[Some Full Path Reference to Your Page]]Demo
pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Page
Image with absolute path
![[en/integrations/markdown-it-bi-directional-links/images/railway near by beach same name.jpg]]Demo
And it is distinguishable to the pictures with the same name:
![[en/integrations/markdown-it-bi-directional-links/images/same-name/railway near by beach same name.jpg]]Demo
Audio with absolute path
![[pages/en/integrations/markdown-it-bi-directional-links/audios/Applause.mp3]]Demo
Video with absolute path
![[pages/en/integrations/markdown-it-bi-directional-links/videos/Big rabbit came out of the hutch.mp4]]Demo
Absolute path with custom text
[[Some Full Path Reference to Your Page|Custom Text]]Demo
Neko