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 pathType: [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