Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

同样的代码为什么Lute和思源渲染的结果不一致？ #14310

Closed
3 tasks done
wish5115 opened this issue Mar 8, 2025 · 7 comments
Closed
3 tasks done

同样的代码为什么Lute和思源渲染的结果不一致？ #14310

wish5115 opened this issue Mar 8, 2025 · 7 comments

Comments

@wish5115
Copy link

wish5115 commented Mar 8, 2025

Is there an existing issue for this?

  • I have searched the existing issues

Can the issue be reproduced with the default theme (daylight/midnight)?

  • I was able to reproduce the issue with the default theme

Could the issue be due to extensions?

  • I've ruled out the possibility that the extension is causing the problem.

Describe the problem

Image

Image

如上图，在思源中，给文本添加颜色后，同样的源码，思源渲染的HTML结果（见图中的3）为何和Lute渲染的结果（见图中的4）不一致？

这会导致一个问题，当我用Lute渲染SQL 查询到的markdown源码时，结果和思源笔记中的不一致，导致产生意外结果。

请问大佬们，是我用法不对吗？正确该怎么渲染markdown源码？

Expected result

二者渲染结果一致

Screenshot or screen recording presentation

No response

Version environment

- Version:  v3.1.24
- Operating System: windows10
- Browser (if used):no

Log file

no

More information

No response
@88250
Copy link
Member

88250 commented Mar 8, 2025

图 3 和 4 好像是一样的……？

@TCOTC
Copy link
Contributor

TCOTC commented Mar 8, 2025

是对比这两个吧：

Image

@wish5115
Copy link
Author

wish5115 commented Mar 8, 2025 •
edited
Loading

图 3 和 4 好像是一样的……？

对的，就是 @TCOTC 说的那样，3和4渲染的结果不一样，看输出，别看输入。

Image

且数据库markdown字段查询结果也是这个源码，实际上是Lute渲染的是SQL查询的markdown字段内容。

Image

期望这个Lute渲染结果也是这个，即和思源笔记渲染结果一致

Image

确切的说，思源笔记中渲染的结果是这个，bbbb是在h4的文本

Image

@88250
Copy link
Member

88250 commented Mar 9, 2025

需要设置 lute 参数，请参考 https://github.com/siyuan-note/siyuan/blob/master/app/src/protyle/render/setLute.ts

@88250
Copy link
Member

88250 commented Mar 9, 2025

我先关闭了，还有问题的话请随时跟帖。

@88250 88250 closed this as completed Mar 9, 2025
@TCOTC
Copy link
Contributor

TCOTC commented Mar 9, 2025

试了一下确实可以了：

Image

附上 AI 生成的代码：

const setLute = (options) => {
    const lute = window.Lute.New();
    lute.SetSpellcheck(window.siyuan.config.editor.spellcheck);
    lute.SetProtyleMarkNetImg(window.siyuan.config.editor.displayNetImgMark);
    lute.SetFileAnnotationRef(true);
    lute.SetHTMLTag2TextMark(true);
    lute.SetTextMark(true);
    lute.SetHeadingID(false);
    lute.SetYamlFrontMatter(false);
    lute.PutEmojis(options.emojis);
    lute.SetEmojiSite(options.emojiSite);
    lute.SetHeadingAnchor(options.headingAnchor);
    lute.SetInlineMathAllowDigitAfterOpenMarker(true);
    lute.SetToC(false);
    lute.SetIndentCodeBlock(false);
    lute.SetParagraphBeginningSpace(true);
    lute.SetSetext(false);
    lute.SetFootnotes(false);
    lute.SetLinkRef(false);
    lute.SetSanitize(options.sanitize);
    lute.SetChineseParagraphBeginningSpace(options.paragraphBeginningSpace);
    lute.SetRenderListStyle(options.listStyle);
    lute.SetImgPathAllowSpace(true);
    lute.SetKramdownIAL(true);
    lute.SetTag(true);
    lute.SetSuperBlock(true);
    lute.SetMark(true);
    lute.SetInlineAsterisk(window.siyuan.config.editor.markdown.inlineAsterisk);
    lute.SetInlineUnderscore(window.siyuan.config.editor.markdown.inlineUnderscore);
    lute.SetSup(window.siyuan.config.editor.markdown.inlineSup);
    lute.SetSub(window.siyuan.config.editor.markdown.inlineSub);
    lute.SetTag(window.siyuan.config.editor.markdown.inlineTag);
    lute.SetInlineMath(window.siyuan.config.editor.markdown.inlineMath);
    lute.SetGFMStrikethrough1(false);
    lute.SetGFMStrikethrough(window.siyuan.config.editor.markdown.inlineStrikethrough);
    lute.SetMark(window.siyuan.config.editor.markdown.inlineMark);
    lute.SetSpin(true);
    lute.SetProtyleWYSIWYG(true);
    if (options.lazyLoadImage) {
        lute.SetImageLazyLoading(options.lazyLoadImage);
    }
    lute.SetBlockRef(true);
    if (window.siyuan.emojis[0].items.length > 0) {
        const emojis = {};
        window.siyuan.emojis[0].items.forEach(item => {
            emojis[item.keywords] = options.emojiSite + "/" + item.unicode;
        });
        lute.PutEmojis(emojis);
    }
    return lute;
};

// 1. 优化查找函数（仅匹配 .editor.protyle 结尾路径）
function findProtylePaths(obj) {
    const results = [];
    const seen = new Set();

    function walk(obj, path = '') {
        if (!obj || seen.has(obj)) return;
        seen.add(obj);

        for (const [key, value] of Object.entries(obj)) {
            const currentPath = path ? `${path}.${key}` : key;
            
            // 检查是否以 .editor.protyle 结尾
            if (currentPath.endsWith('.editor.protyle')) {
                results.push({ path: currentPath, value });
            }

            if (typeof value === 'object') {
                walk(value, currentPath);
            }
        }
    }

    walk(obj);
    return results;
}

// 2. 获取目标对象
const protylePaths = findProtylePaths(window.siyuan);
const firstProtyle = protylePaths[0]?.value;

if (firstProtyle) {
    // 3. 动态设置 lute 并调用
    firstProtyle.lute = setLute({
        emojiSite: firstProtyle.options?.hint?.emojiPath,
        emojis: firstProtyle.options?.hint?.emoji,
        headingAnchor: false,
        listStyle: firstProtyle.options?.preview?.markdown?.listStyle,
        paragraphBeginningSpace: firstProtyle.options?.preview?.markdown?.paragraphBeginningSpace,
        sanitize: firstProtyle.options?.preview?.markdown?.sanitize,
    });

    // 4. 安全调用方法
    if (firstProtyle.lute?.Md2BlockDOM) {
        console.log(firstProtyle.lute.Md2BlockDOM(
            '### b<span data-type="text" style="color: var(--b3-font-color8);">bb</span>b'
        ));
    }
} else {
    console.warn('未找到符合条件的 protyle 对象');
}

@wish5115
Copy link
Author

wish5115 commented Mar 9, 2025 •
edited
Loading

感谢 @88250 @TCOTC 两位大佬！

我在@TCOTC 大佬的基础上又简单封装了一下，更方便调用。

调用方式：getLute().Md2BlockDOM(`xxxxx`);

封装函数如下：

function getLute() {
    const setLute = (options) => {
        const lute = window.Lute.New();
        lute.SetSpellcheck(window.siyuan.config.editor.spellcheck);
        lute.SetProtyleMarkNetImg(window.siyuan.config.editor.displayNetImgMark);
        lute.SetFileAnnotationRef(true);
        lute.SetHTMLTag2TextMark(true);
        lute.SetTextMark(true);
        lute.SetHeadingID(false);
        lute.SetYamlFrontMatter(false);
        lute.PutEmojis(options.emojis);
        lute.SetEmojiSite(options.emojiSite);
        lute.SetHeadingAnchor(options.headingAnchor);
        lute.SetInlineMathAllowDigitAfterOpenMarker(true);
        lute.SetToC(false);
        lute.SetIndentCodeBlock(false);
        lute.SetParagraphBeginningSpace(true);
        lute.SetSetext(false);
        lute.SetFootnotes(false);
        lute.SetLinkRef(false);
        lute.SetSanitize(options.sanitize);
        lute.SetChineseParagraphBeginningSpace(options.paragraphBeginningSpace);
        lute.SetRenderListStyle(options.listStyle);
        lute.SetImgPathAllowSpace(true);
        lute.SetKramdownIAL(true);
        lute.SetTag(true);
        lute.SetSuperBlock(true);
        lute.SetMark(true);
        lute.SetInlineAsterisk(window.siyuan.config.editor.markdown.inlineAsterisk);
        lute.SetInlineUnderscore(window.siyuan.config.editor.markdown.inlineUnderscore);
        lute.SetSup(window.siyuan.config.editor.markdown.inlineSup);
        lute.SetSub(window.siyuan.config.editor.markdown.inlineSub);
        lute.SetTag(window.siyuan.config.editor.markdown.inlineTag);
        lute.SetInlineMath(window.siyuan.config.editor.markdown.inlineMath);
        lute.SetGFMStrikethrough1(false);
        lute.SetGFMStrikethrough(window.siyuan.config.editor.markdown.inlineStrikethrough);
        lute.SetMark(window.siyuan.config.editor.markdown.inlineMark);
        lute.SetSpin(true);
        lute.SetProtyleWYSIWYG(true);
        if (options.lazyLoadImage) {
            lute.SetImageLazyLoading(options.lazyLoadImage);
        }
        lute.SetBlockRef(true);
        if (window.siyuan.emojis[0].items.length > 0) {
            const emojis = {};
            window.siyuan.emojis[0].items.forEach(item => {
                emojis[item.keywords] = options.emojiSite + "/" + item.unicode;
            });
            lute.PutEmojis(emojis);
        }
        return lute;
    };
    
    // 1. 优化查找函数（仅匹配 .editor.protyle 结尾路径）
    function findProtylePaths(obj) {
        const results = [];
        const seen = new Set();
    
        function walk(obj, path = '') {
            if (!obj || seen.has(obj)) return;
            seen.add(obj);
    
            for (const [key, value] of Object.entries(obj)) {
                const currentPath = path ? `${path}.${key}` : key;
                
                // 检查是否以 .editor.protyle 结尾
                if (currentPath.endsWith('.editor.protyle')) {
                    results.push({ path: currentPath, value });
                }
    
                if (typeof value === 'object') {
                    walk(value, currentPath);
                }
            }
        }
    
        walk(obj);
        return results;
    }
    
    // 2. 获取目标对象
    const protylePaths = findProtylePaths(window.siyuan);
    const firstProtyle = protylePaths[0]?.value;
    
    if (firstProtyle) {
        // 3. 动态设置 lute 并调用
        firstProtyle.lute = setLute({
            emojiSite: firstProtyle.options?.hint?.emojiPath,
            emojis: firstProtyle.options?.hint?.emoji,
            headingAnchor: false,
            listStyle: firstProtyle.options?.preview?.markdown?.listStyle,
            paragraphBeginningSpace: firstProtyle.options?.preview?.markdown?.paragraphBeginningSpace,
            sanitize: firstProtyle.options?.preview?.markdown?.sanitize,
        });
    
        // 4. 获取lute实例
        return firstProtyle.lute;
    } else {
        console.warn('未找到符合条件的 protyle 对象');
        return Lute.New();
    }
}

关联 https://ld246.com/article/1741527865453

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@88250 @wish5115 @TCOTC