Renders Obsidian-style images in markdown-it. This is useful for making Obsidian-based blogs or digital gardens..
Install this into your project:
npm --save install markdown-it-obsidian-images
...and use it:
const obsidianImages = require('markdown-it-obsidian-images')(options)
const md = require('markdown-it')()
.use(obsidianImages)
.render('![[Image1|A beautiful image]] [[/Image2]]')
Output:
<p><img src="./Image1.png" alt="A beautiful image" /> <img src="/Image2.png" /></p>
Default: /
The base URL for absolute image URLs.
const html = require('markdown-it')()
.use(require('markdown-it-obsidian-images')({ baseURL: '/content/' }))
.render('![[/Hero Image]]')
// <p><img src="/content/Hero_Image.png" /></p>
Default: ./
The base URL for relative wiki links.
const html = require('markdown-it')()
.use(require('markdown-it-obsidian-images')({ relativeBaseURL: '/content/', suffix: '' }))
.render('![[Hero Image]]')
// <p><img src="/content/Hero_Image" /></p>
Default: false
Render all image URLs as absolute paths.
Default: .png
Append this suffix to every URL.
const html = require('markdown-it')()
.use(require('markdown-it-obsidian-images')({ uriSuffix: '.jpg' }))
.render('![[Hero Image]]')
// <p><img src="./Hero_Image.jpg" /></p>
Default: {}
An object containing HTML attributes to be applied to every link.
const attrs = {
'class': 'full-width'
}
const html = require('markdown-it')()
.use(require('markdown-it-obsidian-images')({ htmlAttributes: attrs }))
.render('![[Hero Image]]')
// <p><img src="./Hero_Image.png" class="full-width" /></p>
A transform applied to every page name.
The default transform does the following things:
- trim surrounding whitespace
- sanitize the string
const _ = require('slugify')
function myCustomPostProcessImageName(label) {
return label.split('/').map(function(pathSegment) {
return slugify(pathSegment.toLowerCase())
})
}
const html = require('markdown-it')()
.use(require('markdown-it-obsidian-images')({ postProcessImageName: myCustomPostProcessImageName }))
.render('![[Hello World]]')
// <p><img src="./hello-world.png" /></p>
A transform applied to every image alt label. You can override it just like postProcessImageName
(see above).
The default transform trims surrounding whitespace and replaces the characters <&"
with html-encoded equivalents
Based on markdown-it-wikilinks by Julio Sepia