求助如何设计一个css可以在code字段内自定义语言及格式

zzwzzmzwtyb · 2025 年9 月 20 日 15:10

想让code字段的内容显示如下的效果：

字段内容如下：


BEGIN_ASM_DESCR
!装配描述块起始符

IF_1 ELEM_NEW
CONFIG_ELEM
END_IF_1
!以上为固定字段

IF_2 ELEM_EXIST
USER_SELECT AXIS AN_AXIS
!用户选择参考类型基准轴并存入名为'AN_AXIS'的参考变量
USER_SELECT FACE AN_FACE
!用户选择参考类型面并存入名为'AN_FACE'的参考变量
END_IF_2
!以上IF_2及END_IF_2为固定字段

SEARCH_MDL_REF THIS FACE TOP IN_FACE
!搜索库元件内名为'TOP'的面，并将其存入参考变量‘IN_FACE’中
SEARCH_MDL_REF THIS AXIS AAXIS IN_AXIS
!搜索库元件内名为'AAXIS'的基准轴，并将其存入参考变量‘IN_AXIS’中

ASSEMBLE THIS
ALIGN AN_FACE IN_FACE
!对齐重合'AN_FACE'与'IN_FACE'参考变量
ALIGN AN_AXIS IN_AXIS
!对齐重合'AN_AXIS'与'IN_AXIS'参考变量
END_ASSEMBLE
!以上为组装语句

REGEN_MDL ASSEMBLY
!重生组件

END_ASM_DESCR
!装配描述块结束符

BEGIN_GUI_DESCR
!图形用户界面起始符
USER_SELECT AXIS AN_AXIS 放置轴
!用户选择参考类型基准轴并存入名为'AN_AXIS'的参考变量，在CREO界面内显示'放置轴'
USER_SELECT FACE AN_FACE 放置面
!用户选择参考类型基准轴并存入名为'AN_FACE'的参考变量，在CREO界面内显示'放置面'
END_GUI_DESCR
!图形用户界面结束符

the_tree · 2025 年9 月 20 日 17:07

支持某个语言的代码高亮是通过插件实现的。需要用代码来识别出来特定的语法成分，比如哪些是关键字，哪些是注释，哪些是名字。

CSS 恐怕不好弄，毕竟你得能识别出来以 ! 开头的内容是注释，这个CSS做不到。
或者你可以找找有没有什么语言和你这个语言比较接近，凑合着用那个语言的代码高亮。

zzwzzmzwtyb · 2025 年9 月 20 日 17:22

喔，谢谢你了。我还以为用CSS就可以了呢。请问如何修改如Fortran这样语言的格式呢？这样就可以显示afx的格式。这个显示是notepad++显示的效果，能否导入这个的xml进来呢？

the_tree · 2025 年9 月 21 日 03:22

如果是要用插件来实现的话：

实时预览模式下的话，可以参考这个项目给 gdscript 的实现：

github.com

RobTheFiveNine/obsidian-gdscript/blob/main/src/main.js

import { Plugin } from 'obsidian';


export default class GdscriptSyntaxPlugin extends Plugin {
    onload() {
        var self = this;

        // The defineSimpleMode function is not immediately available during
        // onload, so continue to try and define the language until it is.
        const setupInterval = setInterval(() => {
            if (CodeMirror && CodeMirror.defineSimpleMode) {
                const mode = {
                    start: [
                        { regex: /\b0x[0-9a-f]+\b/i, token: "number" },
                        { regex: /\b-?\d+\b/, token: "number" },
                        { regex: /#.+/, token: 'comment' },
                        { regex: /\s*(@onready|@export)\b/, token: 'keyword' },
                        { regex: /\b(?:and|as|assert|await|break|breakpoint|const|continue|elif|else|enum|for|if|in|is|master|mastersync|match|not|null|or|pass|preload|puppet|puppetsync|remote|remotesync|return|self|setget|static|tool|var|while|yield)\b/, token: 'keyword' },
                        { regex: /[()\[\]{},]/, token: "meta" },

This file has been truncated. show original

阅读模式下 obsidian 用的是 prism 库，也是写一些正则表达式来解析语法：

github.com

PrismJS/prism/blob/v2/src/languages/fortran.js

/** @type {import('../types.d.ts').LanguageProto<'fortran'>} */
export default {
	id: 'fortran',
	grammar: {
		'quoted-number': {
			pattern: /[BOZ](['"])[A-F0-9]+\1/i,
			alias: 'number',
		},
		'string': {
			pattern:
				/(?:\b\w+_)?(['"])(?:\1\1|&(?:\r\n?|\n)(?:[ \t]*!.*(?:\r\n?|\n)|(?![ \t]*!))|(?!\1).)*(?:\1|&)/,
			inside: {
				'comment': {
					pattern: /(&(?:\r\n?|\n)\s*)!.*/,
					lookbehind: true,
				},
			},
		},
		'comment': {
			pattern: /!.*/,

This file has been truncated. show original

如果是通过修改 fortran 的CSS来实现的话：

每一类解析出的语法元素，都有自己的类名。比如注释都有 cm-comment，关键字是 cm-keyword，可以通过控制台来查看每种语法元素的类名，然后自己写CSS修改显示的效果。

zzwzzmzwtyb · 2025 年9 月 21 日 04:40

好的，谢谢，看来还比较复杂。小白一个看来弄不好了。