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

Option	Description	Default value
imagePrefix	if exist, replace path for the image. it takes a string tuple which length is 2, and its elements are from and to consequently. e.g. {imagePrefix: ['static', '']} => remove 'static' from the path Type: [string, string] | undefined	[]
linkPrefix	if exist, replace path for the link. it takes a string tuple which length is 2, and its elements are from and to consequently. e.g. {linkPrefix: ['src', '']} => remove 'src' from the path. Type: [string, string] | undefined	[]
linkClass	the class added to <a> element, if the link is NOT just an id(e.g. [[#section1]]) Type : string | string[] | undefined	"link-page"
idClass	the class added to <a> element, if the link is just an id(e.g. [[#section1]]) Type: string | string[] | undefined	"link-id"
slugify	slugify function for filename and id. if pass a custom function, replace the default slugify function. if pass "none", it does not perform the slugifying process. Type: (string) => string | "none" | undefined	slugify

• 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