当前位置：首页 > news >正文

【Godot4.3】MarkDown编辑和控件事实渲染

news 2025/5/7 9:50:44

概述

这是本人2024年5月份左右编写的一个简易的MarkDown编辑和渲染测试项目，基于自己编写的MarkDown解析和生成类MDdoc编写。之前是作为一个试验性的内容混乱的放置在另一个测试项目中，现在独立为一个单独项目。因为测验成功后就一直没改动，所以这仍然是一个很初期的版本。

项目核心

在这里插入图片描述

它的核心是有两部分：

MDdoc类：一个MarkDown纯文本解析类，可以将MarkDown文档元素按其顺序解析为对象，从存入内部的数组。每个MarkDown文档元素对应MDdoc的一个内部类：
- CodebBlock：代码块
- Headding：标题，H1-H6
- Paragraph：普通段落
- Img：图片
- UL：无序列表
- OL：有序列表
- Table：表格
主编辑器：采用传统的左侧编写，右侧渲染的形式。其主要是在左侧编辑器编辑时，利用MDdoc类实时的生成MarkDown元素列表，再借由右侧的一个VBoxContainer顺序渲染相应的控件显示内容。

在这里插入图片描述

编辑器语法高亮

为了让MarkDown代码显得不那么无聊，在对应的CodeEdit上手动用代码添加了一些语法高亮规则。

extends CodeEdit@export var Hedding_color:= Color.GOLD
@export var codeblock_color:= Color.AQUAMARINEfunc _ready() -> void:var highlighter = CodeHighlighter.new()# H1 - H6for i in range(6):highlighter.add_color_region("%s " % "#".repeat(i+1)," ",Hedding_color,true)highlighter.add_color_region("```","```",codeblock_color,false)highlighter.add_color_region("- "," ",codeblock_color,true)for i in range(100):var start = "1. " % (i+1)highlighter.add_color_region(start," ",codeblock_color,true)#highlighter.add_color_region("- "," ",codeblock_color,true)syntax_highlighter = highlighter

实时渲染

在mdTest（VBoxContainer）节点上，我们通过遍历MDdoc解析后生成的MarkDown元素数组，并根据对应的元素类型添加不同的控件为mdTest的子节点，从而实现MarkDown内容渲染和显示。

每次调用render，都会先清空mdTest（VBoxContainer）上的所有子节点，然后重新渲染MDdoc解析后生成的MarkDown元素

# ==================== 核心渲染方法 ====================
# 渲染为控件
func render(md):# 清空原来的for child in get_children():remove_child(child)# 渲染var doc := MDdoc.parse(md)for ele in doc._doc:if ele is MDdoc.Headding:add_child(H(ele.level,ele.text))if ele is MDdoc.CodebBlock:add_child(CodeBlock(ele.language,ele.code))if ele is MDdoc.Paragraph:add_child(p(ele.text))if ele is MDdoc.UL:add_child(ul(ele))if ele is MDdoc.OL:add_child(ol(ele))if ele is MDdoc.Img:add_child(img(ele.src,ele.desc))

其中render()在_ready()和CodeEdit发生文本改变时调用，从而实现运行后的解析和编辑时的实时渲染。

func _ready() -> void:render(code_edit.text)# 文本发生改变时
func _on_code_edit_text_changed() -> void:render(code_edit.text)pass

为了让代码清晰，为控件生成编写了对应的函数。

# ==================== 获取对应的控件 ====================
# H1- H6
func H(level:int,text:String) -> Label:var lab := Label.new()lab.text = textlab.set("theme_override_font_sizes/font_size",H_size[level-1])lab.set("theme_override_colors/font_color",font_color)return lab# 段落
func p(text:String) -> Label:var lab := Label.new()lab.text = textlab.set("theme_override_font_sizes/font_size",p_size)lab.set("theme_override_colors/font_color",font_color)return lab# 代码块
func CodeBlock(language:String,code:String) -> CodeEdit:var txt := CodeEdit.new()txt.text = codetxt.custom_minimum_size.y = 200txt.gutters_draw_line_numbers = truereturn txt# 无序列表
func ul(ele) -> Label:var lab := Label.new()lab.text = ele.to_string()lab.set("theme_override_font_sizes/font_size",p_size)lab.set("theme_override_colors/font_color",font_color)return lab# 无序列表
func ol(ele) -> Label:var lab := Label.new()lab.text = ele.to_string()lab.set("theme_override_font_sizes/font_size",p_size)lab.set("theme_override_colors/font_color",font_color)return lab
# 图片
func img(src:String,desc:String):var pic := TextureRect.new()pic.expand_mode = TextureRect.EXPAND_FIT_WIDTHpic.stretch_mode = TextureRect.STRETCH_KEEP_ASPECT_CENTEREDpic.custom_minimum_size.y = 100if load(src):pic.texture = load(src)else:pic.texture = load("res://1.jpeg")return pic

剩余的就是基础的应用和参数设定了。

extends VBoxContainer@onready var code_edit: CodeEdit = %CodeEdit# 文本颜色
@export var font_color:Color = Color.BLACK# 字号
var H_size = [48,40,36,32,28,26]  # H1-H6字号
var p_size = 20  # 正文字号