1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import type MarkdownIt from 'markdown-it';
import path from 'node:path';

interface ImageOptions {
  imageDir?: string;
}

export function prefixifyImageURL(md: MarkdownIt, pluginOptions?:ImageOptions) {
  const imageDir = pluginOptions?.imageDir || ".";

  const original = md.renderer.rules.image!;
  md.renderer.rules.image = (tokens, idx, options, env, self) => {
    const token = tokens[idx];
    const src = token?.attrGet('src');
    if (src) {
      token.attrSet('src', path.join(imageDir, src));
    }

    return original(tokens, idx, options, env, self);
  };
}

1
2
3
4
5
6
7

export function activate(context: vscode.ExtensionContext) {
  return {
    extendMarkdownIt(md: MarkdownIt) {
      return md.use(prefixifyImageURL, {imageDir: "assets"});
    }
  };
}

1
2
3

"contributes": {
    "markdown.markdownItPlugins": true
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import fs from 'fs';
import matter from 'gray-matter';

function getImageDir(filePath: string): string | null {
  const fileContent = fs.readFileSync(filePath, 'utf-8');
  const { data } = matter(fileContent);
  return data['typora-root-url'] ?? null;
}

export function prefixifyImageURL(md: MarkdownIt) {
  const original = md.renderer.rules.image!;
  md.renderer.rules.image = (tokens, idx, options, env, self) => {
    let imageDir = env.imageDir;

    if (imageDir === undefined) {
      const filePath = env.currentDocument.path;
      imageDir = getImageDir(filePath);
      env.imageDir = imageDir;
    }

    if (imageDir !== null) {
      const token = tokens[idx];
      const src = token?.attrGet('src');
      if (src) {
        token.attrSet('src', path.join(imageDir, src));
      }
    }

    return original(tokens, idx, options, env, self);
  };
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

import frontMatter from 'markdown-it-front-matter';
import yaml from 'js-yaml';

let dynamicImageDir: any;

interface ImageOptions {
  imageDir?: Function;
}

export function prefixifyImageURL(md: MarkdownIt, pluginOptions?: ImageOptions) {
  const original = md.renderer.rules.image!;
  md.renderer.rules.image = (tokens, idx, options, env, self) => {
    const token = tokens[idx];
    const src = token?.attrGet('src');
    const imageDir = pluginOptions?.imageDir?.();
    if (imageDir && src) {
      token.attrSet('src', path.join(imageDir, src));
    }

    return original(tokens, idx, options, env, self);
  };
}

export function activate(context: vscode.ExtensionContext) {
  return {
    extendMarkdownIt(md: MarkdownIt) {
      return md.use(frontMatter, (fm: string) => {
        const fmData = yaml.load(fm) as Record<string, any>;
        const imageDir = fmData?.['typora-root-url'];
        dynamicImageDir = imageDir;
      }).use(prefixifyImageURL, {
        imageDir: () => dynamicImageDir,
      });
    }
  };
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

export function parseHrefAndDimensions(href: string): { href: string; dimensions: string[] } {
  const dimensions: string[] = [];
  const splitted = href.split('|').map(s => s.trim());
  href = splitted[0];
  const parameters = splitted[1];
  if (parameters) {
    const heightFromParams = /height=(\d+)/.exec(parameters);
    const widthFromParams = /width=(\d+)/.exec(parameters);
    const height = heightFromParams ? heightFromParams[1] : '';
    const width = widthFromParams ? widthFromParams[1] : '';
    const widthIsFinite = isFinite(parseInt(width));
    const heightIsFinite = isFinite(parseInt(height));
    if (widthIsFinite) {
      dimensions.push(`width="${width}"`);
    }
    if (heightIsFinite) {
      dimensions.push(`height="${height}"`);
    }
  }
  return { href, dimensions };
}