本文主要是介绍【Godot4.3】MarkDown编辑和控件事实渲染,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
概述
这是本人2024年5月份左右编写的一个简易的MarkDown编辑和渲染测试项目,基于自己编写的MarkDown解析和生成类MDdoc编写。之前是作为一个试验性的内容混乱的放置在另一个测试项目中,现在独立为一个单独项目。因为测验成功后就一直没改动,所以这仍然是一个很初期的版本。
项目核心
它的核心是有两部分:
MDdoc
类:一个MarkDown纯文本解析类,可以将MarkDown文档元素按其顺序解析为对象,从存入内部的数组。每个MarkDown文档元素对应MDdoc
的一个内部类:CodebBlock
:代码块Headding
:标题,H1-H6Paragraph
:普通段落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 # 正文字号
其他渲染选择
其实利用VBoxContainer
按顺序动态加载控件的形式只是一个很简易甚至粗鄙的形式,完全没有考虑长篇幅文档的性能问题。
在Godot内部,可以选择其他的形式来作为MarkDown内容渲染和显示的选择:
RichTextLabel
+BBCode:富文本标签,天然支持BBCode语法,也是Godot内置文档的渲染和显示控件,很容易实现,而且可以选择和复制内容- 基于绘图函数的渲染:基于
CanvasItem
的绘图函数,我们可以将MarkDown内容渲染到一个Control
上
其中RichTextLabel
是比较有前途的选项。
代码实时渲染类工具的魅力
其实采用VBoxContainer
动态渲染是为了检验一种工具软件类型的可行性,就是代码实时渲染类工具。
它的特点就是一边编写,一边运行代码进行测试。在5月份编写这个工具的同时,我还测试编写了一个用代码测试绘图函数和动画的小工具。
界面和功能分离
MDdoc
其实是MarkDown解析和生成的核心,借由这个类,我可以选择不同的MarkDown渲染路线,创建不同的界面,甚至完全不同的程序。甚至也可以将其用于创建游戏项目的内置百科。
这篇关于【Godot4.3】MarkDown编辑和控件事实渲染的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!