remark-obsidian-links v1.2.7

Introduce

a remark plugin that converts obsidian internal links into common links or images

• make sure that the route must be internal path
  • e.g. [[link]] or ![[image]]

Init

pnpm i -D remark-obsidian-links

import convertObsidianLinks from "remark-obsidian-links"; // exported as default

Obsidian Setting

It is recommended to use the full path(absolute path) of links for obsidian internal links, so that you can replace some part of the path without worrying wherever your markdown file located on (by default, obsidian links direct to the closest file)

you can enable this at obsidian > setting(preferences) > Files & Links > New link foramt to Absolute path in vault.

Examples

[[link]]

only id

- source

```md
[[#Section 2]]
```

- yields

```html
<a href="#section-2">Section 2</a>
```

• the id will be slugified with default slugify function, but you can use your own by passing through options.slugify

default(link = value)

- source

```md
[[src/posts/1. my post]]
```

- yields

```html
<a href="src/posts/1-my-post">src/posts/1-my-post</a>
```

- or yields (options.linkPrefix = ['src', ''])

```html
<a href="/posts/1-my-post">/posts/1-my-post</a>
```

• the filename will be slugified with default slugify function, but you can use your own by passing through options.slugify
• you can replace some part of your link path with options.linkPrefix

link with label

- source

```md
[[src/posts/my-post|My Post]]
```

- yields

```html
<a href="src/posts/my-post">My Post</a>
```

- or yields (options.linkPrefix = ['src', ''])

```html
<a href="/posts/my-post">My Post</a>
```

link with id & label

- source

```md
[[src/posts/my-post#Section 2|My Post Section 2]]
```

- yields

```html
<a href="src/posts/my-post#section-2">My Post Section 2</a>
```

- or yields (options.linkPrefix = ['src', ''])

```html
<a href="/posts/my-post#section-2">My Post Section 2</a>
```

![[image]]

default(alt = src)

- source

```md
![[static/img/image1.png]]
```

- yields

```html
<img src="static/img/image1.png" alt="static/img/image1.png" />
```

- or yields (options.imagePrefix = ['static', ''])

```html
<img src="/img/image1.png" alt="/img/image1.png" />
```

• you can replace some part of your image path with options.imagePrefix

image with alt

- source

```md
![[static/img/image1.png|first image]]
```

- yields

```html
<img src="static/img/image1.png" alt="first image" />
```

- or yields (options.imagePrefix = ['static', ''])

```html
<img src="/img/image1.png" alt="first image" />
```

Options

• if you need any additional options, feel free to leave an issue!

slugify

function slugify(str) {
	return str
		.toLowerCase()
		.replace(/[^\w]+/g, '-')
		.replace(/(^-|-$)+/g, '');
	}
}

• default slugify function performs below
  1. change all alphabet characters into lowercase
  2. change all characters into -character, without a-z | A-Z | 0-9 | _ characters
  3. delete first and last - characters

License

MIT