Unable to parse link

[qianmoQ]

Marked version:

15.0.4

Describe the bug

---
title: 欢迎使用 PageForge
---

# h1 - h6 模版

---

# h1
## h2
### h3
#### h4
##### h5
###### h6

# 段落

---

PageForge 是一款现代化的静态页面生成与部署平台，旨在帮助用户快速创建精美的静态网站，并一键部署到 GitHub Pages。 
无论是个人博客、项目文档还是企业官网，PageForge 都能让你轻松实现高效构建、智能部署和即时上线。

# 无序列表

---

- 元素1
- 元素2
- 元素3

# 有序列表

---

1. 元素1
2. 元素2
3. 元素3

# 任务列表

---

- [ ] 元素1
- [ ] 元素2
- [ ] 元素3
- [x] 元素1
- [x] 元素2
- [x] 元素3

# 链接

---

[PageForge](https://github.com/devlive-community/pageforge)

To Reproduce
Steps to reproduce the behavior:

MyCode

        const renderer = {
            link(item) {
              console.log(item)
                return loadComponent('link', {
                    href: item.href,
                    text: item.text
                });
            },
            heading(item) {
                return loadComponent(`h${item.depth}`, {
                    checked: item.checked,
                    text: item.text
                });
            },
            space(item) {
                return loadComponent('space');
            },
            hr(item) {
                return loadComponent('hr');
            },
            paragraph(item) {
                return loadComponent('p', {
                    text: item.text
                });
            },
            list(item) {
                return loadComponent('list', {
                    item
                });
            }
        };

        const html = marked(markdownContent, {
            renderer: renderer,
        });

Expected behavior

{
  type: 'paragraph',
  raw: 'PageForge 是一款现代化的静态页面生成与部署平台，旨在帮助用户快速创建精美的静态网站，并一键部署到 GitHub Pages。 \n' +
    '无论是个人博客、项目文档还是企业官网，PageForge 都能让你轻松实现高效构建、智能部署和即时上线。',
  text: 'PageForge 是一款现代化的静态页面生成与部署平台，旨在帮助用户快速创建精美的静态网站，并一键部署到 GitHub Pages。 \n' +
    '无论是个人博客、项目文档还是企业官网，PageForge 都能让你轻松实现高效构建、智能部署和即时上线。',
  tokens: [
    {
      type: 'text',
      raw: 'PageForge 是一款现代化的静态页面生成与部署平台，旨在帮助用户快速创建精美的静态网站，并一键部署到 GitHub Pages。 \n' +
        '无论是个人博客、项目文档还是企业官网，PageForge 都能让你轻松实现高效构建、智能部署和即时上线。',
      text: 'PageForge 是一款现代化的静态页面生成与部署平台，旨在帮助用户快速创建精美的静态网站，并一键部署到 GitHub Pages。 \n' +
        '无论是个人博客、项目文档还是企业官网，PageForge 都能让你轻松实现高效构建、智能部署和即时上线。',
      escaped: false
    }
  ]
}
{
  type: 'paragraph',
  raw: '[PageForge](https://github.com/devlive-community/pageforge)\n',
  text: '[PageForge](https://github.com/devlive-community/pageforge)',
  tokens: [
    {
      type: 'link',
      raw: '[PageForge](https://github.com/devlive-community/pageforge)',
      href: 'https://github.com/devlive-community/pageforge',
      title: null,
      text: 'PageForge',
      tokens: [Array]
    }
  ]
}

The problem is that type: 'paragraph', but the token is type: 'link', and it is impossible to directly get type: 'link'?

[UziTech]

In the paragraph renderer the item.text is not rendered yet. You will have to render it inside the paragraph renderer like

marked/src/Renderer.ts

Lines 110 to 112 in 476b85e

	paragraph({ tokens }: Tokens.Paragraph): string {
	return `<p>${this.parser.parseInline(tokens)}</p>\n`;
	}

[qianmoQ]

In the paragraph renderer the item.text is not rendered yet. You will have to render it inside the paragraph renderer like

marked/src/Renderer.ts

Lines 110 to 112 in 476b85e

	paragraph({ tokens }: Tokens.Paragraph): string {
	return `<p>${this.parser.parseInline(tokens)}</p>\n`;
	}

[我可以在外部打开哦](https://github.com/devlive-community/pageforge "PageForge" "_blank")

            paragraph({ tokens }) {
                // console.log(tokens)
                return `<p>${this.parser.parseInline(tokens)}</p>\n`;
            },

return

{
  type: 'link',
  raw: 'https://github.com/devlive-community/pageforge',
  text: 'https://github.com/devlive-community/pageforge',
  href: 'https://github.com/devlive-community/pageforge',
  tokens: [
    {
      type: 'text',
      raw: 'https://github.com/devlive-community/pageforge',
      text: 'https://github.com/devlive-community/pageforge'
    }
  ]
}

I customized the rules, but there was a problem after parsing. How can I get my original raw

[UziTech]

What do you mean by your "original raw"? The raw property has the raw markdown that the token was created from.

[qianmoQ]

What do you mean by your "original raw"? The property has the raw markdown that the token was created from.raw

![PageForge](https://raw.githubusercontent.com/devlive-community/pageforge/d751a0bdc90e4cdd8b124a6c8b2adb499c47025f/assets/logo.svg "PageForge" =600x600)

This is my custom format. I want to parse this data. How should I handle it? What configuration do I need to make to adapt it to my method? Can I achieve this by setting the token parsing method?

[UziTech]

You can create a custom extension for that

[qianmoQ]

// image-custom.js
const imageExtension = {
    name: 'pageforgeImage',  // 保持您的自定义类型
    level: 'inline',
    start(src) {
        return src.match(/^!\[/)?.index;
    },
    tokenizer(src, tokens) {
        const rule = /^!\[(.*?)\]\((.*?)(?:\s+"(.*?)")?\s*(?:=(\d+)x(\d+))?\)/;
        const match = rule.exec(src);
        if (match) {
            return {
                type: 'pageforgeImage',  // 保持与 name 一致
                raw: match[0],
                text: match[1],
                alt: match[1],
                href: match[2],
                title: match[3] || null,
                width: match[4] || null,
                height: match[5] || null,
                tokens: []  // 这是 marked v15 必需的
            };
        }
        return false;
    },
    renderer(token) {
        let html = `<img src="${token.href}" alt="${token.alt}"`;
        if (token.title) {
            html += ` title="${token.title}"`;
        }
        if (token.width && token.height) {
            html += ` width="${token.width}" height="${token.height}"`;
        }
        html += '>';
        return html;
    }
};

module.exports = imageExtension;

const imageExtension = require('./extension/marked/image-custom');

const renderer = {
pageforgeImage(item) {}
}

 marked.use({renderer});
marked.use({extensions: [imageExtension]});

Has error

 renderer 'pageforgeImage' does not exist

[UziTech]

import { Marked } from 'marked';

// image-custom.js
const imageExtension = {
  name: 'pageforgeImage', // 保持您的自定义类型
  level: 'inline',
  start(src) {
    return src.match(/^!\[/)?.index;
  },
  tokenizer(src, tokens) {
    const rule = /^!\[(.*?)\]\((.*?)(?:\s+"(.*?)")?\s*(?:=(\d+)x(\d+))?\)/;
    const match = rule.exec(src);
    if (match) {
      return {
        type: 'pageforgeImage', // 保持与 name 一致
        raw: match[0],
        text: match[1],
        alt: match[1],
        href: match[2],
        title: match[3] || null,
        width: match[4] || null,
        height: match[5] || null,
        tokens: [], // 这是 marked v15 必需的
      };
    }
    return false;
  },
  renderer(token) {
    let html = `<img src="${token.href}" alt="${token.alt}"`;
    if (token.title) {
      html += ` title="${token.title}"`;
    }
    if (token.width && token.height) {
      html += ` width="${token.width}" height="${token.height}"`;
    }
    html += '>';
    return html;
  },
};

const marked = new Marked({
  extensions: [imageExtension],
});

console.log(marked.parse(`
![PageForge](https://raw.githubusercontent.com/devlive-community/pageforge/d751a0bdc90e4cdd8b124a6c8b2adb499c47025f/assets/logo.svg "PageForge" =600x600)
`));

[qianmoQ]

marked.use({
    extensions: [
        PageForgeImageExtension
    ],
    renderer
});

module.exports = marked;

This way it works, thanks