chore: update codeblock renderer

plugin/gomark/parser/code_block.go

@@ -1,6 +1,8 @@
 package parser
 
 import (
+	"slices"
+
 	"github.com/usememos/memos/plugin/gomark/ast"
 	"github.com/usememos/memos/plugin/gomark/parser/tokenizer"
 )
@@ -15,51 +17,56 @@ func NewCodeBlockParser() *CodeBlockParser {
 }
 
 func (*CodeBlockParser) Match(tokens []*tokenizer.Token) (ast.Node, int) {
-	if len(tokens) < 9 {
+	rows := tokenizer.Split(tokens, tokenizer.Newline)
+	if len(rows) < 3 {
 		return nil, 0
 	}
 
-	if tokens[0].Type != tokenizer.Backtick || tokens[1].Type != tokenizer.Backtick || tokens[2].Type != tokenizer.Backtick {
+	firstRow := rows[0]
+	if len(firstRow) < 3 {
 		return nil, 0
 	}
-	if tokens[3].Type != tokenizer.Newline && tokens[4].Type != tokenizer.Newline {
+	if firstRow[0].Type != tokenizer.Backtick || firstRow[1].Type != tokenizer.Backtick || firstRow[2].Type != tokenizer.Backtick {
 		return nil, 0
 	}
-	cursor := 4
+	languageTokens := []*tokenizer.Token{}
-	if tokens[3].Type != tokenizer.Newline {
+	if len(firstRow) > 3 {
-		cursor = 5
+		languageTokens = firstRow[3:]
-	}
+		// Check if language is valid.
-
+		availableLanguageTokenTypes := []tokenizer.TokenType{tokenizer.Text, tokenizer.Number, tokenizer.Underscore}
-	matched := false
+		for _, token := range languageTokens {
-	for ; cursor < len(tokens)-3; cursor++ {
+			if !slices.Contains(availableLanguageTokenTypes, token.Type) {
-		if tokens[cursor].Type == tokenizer.Newline && tokens[cursor+1].Type == tokenizer.Backtick && tokens[cursor+2].Type == tokenizer.Backtick && tokens[cursor+3].Type == tokenizer.Backtick {
+				return nil, 0
-			if cursor+3 == len(tokens)-1 {
-				cursor += 4
-				matched = true
-				break
-			} else if tokens[cursor+4].Type == tokenizer.Newline {
-				cursor += 4
-				matched = true
-				break
 			}
 		}
 	}
+
+	contentRows := [][]*tokenizer.Token{}
+	matched := false
+	for _, row := range rows[1:] {
+		if len(row) == 3 && row[0].Type == tokenizer.Backtick && row[1].Type == tokenizer.Backtick && row[2].Type == tokenizer.Backtick {
+			matched = true
+			break
+		}
+		contentRows = append(contentRows, row)
+	}
 	if !matched {
 		return nil, 0
 	}
 
-	languageToken := tokens[3]
+	contentTokens := []*tokenizer.Token{}
-	contentStart, contentEnd := 5, cursor-4
+	for index, row := range contentRows {
-	if languageToken.Type == tokenizer.Newline {
+		contentTokens = append(contentTokens, row...)
-		languageToken = nil
+		if index != len(contentRows)-1 {
-		contentStart = 4
+			contentTokens = append(contentTokens, &tokenizer.Token{
+				Type:  tokenizer.Newline,
+				Value: "\n",
+			})
+		}
 	}
 
-	codeBlock := &ast.CodeBlock{
+	return &ast.CodeBlock{
-		Content: tokenizer.Stringify(tokens[contentStart:contentEnd]),
+		Content:  tokenizer.Stringify(contentTokens),
-	}
+		Language: tokenizer.Stringify(languageTokens),
-	if languageToken != nil {
+	}, 4 + len(languageTokens) + len(contentTokens) + 4
-		codeBlock.Language = languageToken.String()
-	}
-	return codeBlock, cursor
 }

plugin/gomark/parser/math_block.go

@@ -38,13 +38,16 @@ func (*MathBlockParser) Match(tokens []*tokenizer.Token) (ast.Node, int) {
 	}
 
 	contentTokens := []*tokenizer.Token{}
-	for _, row := range contentRows {
+	for index, row := range contentRows {
 		contentTokens = append(contentTokens, row...)
-		contentTokens = append(contentTokens, &tokenizer.Token{
+		if index != len(contentRows)-1 {
-			Type: tokenizer.Newline,
+			contentTokens = append(contentTokens, &tokenizer.Token{
-		})
+				Type:  tokenizer.Newline,
+				Value: "\n",
+			})
+		}
 	}
 	return &ast.MathBlock{
 		Content: tokenizer.Stringify(contentTokens),
-	}, 3 + len(contentTokens) + 2
+	}, 3 + len(contentTokens) + 3
 }

web/src/components/MemoContent/CodeBlock.tsx

@@ -15,14 +15,9 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
   const formatedLanguage = language.toLowerCase() || "plaintext";
   let highlightedCode = hljs.highlightAuto(content).value;
 
-  // Users can set Markdown code blocks as 'iframe'
+  // Users can set Markdown code blocks as `__html` to render HTML directly.
-  // to embed videos or external audio links from services like Apple Music or Spotify.
+  if (formatedLanguage === "__html") {
-  if (formatedLanguage === "iframe") {
+    return <div className="w-full !my-2" dangerouslySetInnerHTML={{ __html: content }} />;
-    const renderHTML = () => {
-      return { __html: content };
-    };
-
-    return <div className="mx-auto w-11/12 !my-4" dangerouslySetInnerHTML={renderHTML()} />;
   }
 
   try {