Open venlon789 opened 2 months ago
venlon789
commented
2 months ago This is MarkdowI want to realize that the first half can render Markdown normally, and the second half is my own defined html.
Currently, all types use html, but the first half of the Markdown does not take effect.n, but it has not taken effect. Currently, all types use html,
ZaMeR12
commented
2 months ago There are 2 links that list some programming language that is accepted in markdown in general.
And the why html is generally not accepted in markdown code block is that markdown can renderer html.
So i think there will be nothing that can be done to correct your case or at least i don't know how to be able to tell the markdown preview to not render html tags in markdown. Another thing that can explain for this situation, is that generally markdown preview/editor in JS is rendered back as html tags, so if there is html tags in the markdown the rerenderer into html format with just see that as html and not understand that is just a code block possibly.
venlon789
commented
2 months ago There are 2 links that list some programming language that is accepted in markdown in general.
And the why html is generally not accepted in markdown code block is that markdown can renderer html.
This is a text in h1 html tag in markdown
So i think there will be nothing that can be done to correct your case or at least i don't know how to be able to tell the markdown preview to not render html tags in markdown. Another thing that can explain for this situation, is that generally markdown preview/editor in JS is rendered back as html tags, so if there is html tags in the markdown the rerenderer into html format with just see that as html and not understand that is just a code block possibly.
Thank you for your reply. I understand what you mean. When using Markdown, we can normally render HTML styles. According to the author's documentation, we need to use the text mode. In the past, it could be rendered, but due to security risks, the author has patched the vulnerability. So currently, we can only choose the HTML mode. However, when using HTML, there are some issues, and Markdown cannot be rendered properly.
This could lead to cross-site scripting (XSS) vulnerabilities when users exchange code snippets containing HTML.You can check the previous issues. They discussed this problem before, so I'm confused now. I want to choose the HTML mode for rendering, but the Markdown styles are not working properly.
venlon789
commented
2 months ago I'm so happy! I solved this issue by using marked every time data is received and pairing it with the overwrite: true property to force a re-render. Now, Markdown can be properly rendered in HTML mode.
import { marked } from 'marked'
...
onmessage(message) {
console.log('onmessage')
const data = JSON.parse(message.data)
currentMesImportantInfo.id = data.id
if (data.status_code === 'SUCCESS') {
reference = {}
if (data?.references?.doc?.length > 0) {
const titleText = data.references.doc.map(item => `《${item.title}》`)
const titleHtml =
`
<div style="font-size: 14px; background-color: #f2f6fc; padding: 11px 16px; border-radius: 8px; margin-top: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span style="color: #67696d;">引用：</span>
<span style="color: #728cb6;">
来源${titleText}
</span>
</div>
`
signals.onResponse({ html: titleHtml })
const linkContentHtml = data.references.doc.map(item => `
<a
onmouseover="this.style.color='#409eff'; this.style.textDecoration='underline';"
onmouseout="this.style.color='#606266'; this.style.textDecoration='none';"
style="font-size: 14px; color: #606266 ; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none;" href="${item.documentUrl}"
target="_blank"
>
${item.content}
</a>
`).join('')
const linkBoxHtml =
`
<div style="background-color: #f2f6fc; padding: 16px; border-radius: 8px; margin-top: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; flex-direction: column;">
${linkContentHtml}
</div>
`
signals.onResponse({ html: linkBoxHtml })
reference = data
} else {
textContent += data.message.content.replace(/\n/g, '<br />')
signals.onResponse({ html: marked(textContent), overwrite: true }) // look at here
}
} else {
signals.onResponse({ error: data.message.content })
}
},Using this method to achieve a typewriter effect sounds great! It's a creative application of re-rendering.
Hello! I would like to ask for some advice on a current requirement. The design is as follows: I want the upper part to have a typewriter effect and render in Markdown format. However, when rendering, I used HTML, but the Markdown style did not take effect. Can you help me solve this problem? Here is my relevant code.