diff --git a/app/components/artifacts.tsx b/app/components/artifacts.tsx index ac0d713b3f8..d725ee6596e 100644 --- a/app/components/artifacts.tsx +++ b/app/components/artifacts.tsx @@ -80,7 +80,7 @@ export const HTMLPreview = forwardRef( }, [props.autoHeight, props.height, iframeHeight]); const srcDoc = useMemo(() => { - const script = ``; + const script = ``; if (props.code.includes("")) { props.code.replace("", "" + script); } diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx index dc11c572d7e..b57fd74904c 100644 --- a/app/components/markdown.tsx +++ b/app/components/markdown.tsx @@ -237,9 +237,26 @@ function escapeBrackets(text: string) { ); } +function tryWrapHtmlCode(text: string) { + // try add wrap html code (fixed: html codeblock include 2 newline) + return text + .replace( + /([`]*?)(\w*?)([\n\r]*?)()/g, + (match, quoteStart, lang, newLine, doctype) => { + return !quoteStart ? "\n```html\n" + doctype : match; + }, + ) + .replace( + /(<\/body>)([\r\n\s]*?)(<\/html>)([\n\r]*?)([`]*?)([\n\r]*?)/g, + (match, bodyEnd, space, htmlEnd, newLine, quoteEnd) => { + return !quoteEnd ? bodyEnd + space + htmlEnd + "\n```\n" : match; + }, + ); +} + function _MarkDownContent(props: { content: string }) { const escapedContent = useMemo(() => { - return escapeBrackets(escapeDollarNumber(props.content)); + return tryWrapHtmlCode(escapeBrackets(escapeDollarNumber(props.content))); }, [props.content]); return (