GameMaker

让WordPress支持GML语法的高亮和函数提示

页面
字体
小树 · 11月8日 · 2019年 · ·

效果展示

默认主题高亮:

/// add_commas(integer, separation)
var str = string(argument0);
var sep = argument1;
for (var i = string_length(str) - (sep - 1); i > 1; i -= sep) {
	str = string_insert(",", str, i);
}
//所有函数会有参数语法提示和函数文档解析,点击可以跳到官网docs
physics_world_gravity(-5, 0); //鼠标放上面试试?
dot_product_3d(); //鼠标点击试试?
return str;

启用GML语法支持:

/// add_commas(integer, separation)
var str = string(argument0);
var sep = argument1;
for (var i = string_length(str) - (sep - 1); i > 1; i -= sep) {
	str = string_insert(",", str, i);
}
//所有函数会有参数语法提示和函数文档解析,点击可以跳到官网docs
physics_world_gravity(-5, 0); //鼠标放上面试试?
dot_product_3d(); //鼠标点击试试?
return str;

引言

GML,就是GameMakerLanguage的简写,是GameMakerStudio所使用的代码语法。

官方DOC:https://docs2.yoyogames.com/source/_build/3_scripting/3_gml_overview/index.html

为了实现这个功能,google到了一个开源gml高亮js插件。非常感谢作者。

官网:GMLsnip,记住这个网站,它就是我们的demo。

Github:https://github.com/zbanack/gml_syntax/

GMLsnip is a side project of long-time GameMaker developer Zack Banack. It's a tool that allows developers to create stylized GML code snippets to embed in websites of their own. It renders GameMaker Language code snippets in browsers just as they appear in the Studio IDE. Originally created specifically for The Step Event, the project's gone open source and is available to all of the GM community.

思路总结

官方编辑器代码 --> 代码区块添加额外css:gml --> 引入gml.js --> 动态判断是否有class是gml的标签 --> 有的话引入核心库并对class是gml的<code>区块进行代码处理 --> gml.js调用 gml_syntax.js核心库 --> 处理完毕 --> 把原来的代码区块替换成处理后的HTML代码 --> OJBK!

嵌入到wordpress的方法

1.核心JS文件

https://github.com/zbanack/gml_syntax/blob/master/gml_syntax.js

不需要引入,它的用法如下,知道就行:

Usage
Call function gml_syntax(input_str)

@param [String] input_str Optional, string to tokenize
@return {Array} return_stack Token objects (class and nanme)

2.拓展官方js函数

借鉴参考 https://www.banack.me/gmlsnip/ 的写法,写一个由代码--->高亮HTML代码的function,一起放到 gml_syntax.js 中,如果不想自己写,直接下载就好了(注:我提供的是在他的代码基础上,略微更改以适应我的主题,如果报错,请自行下载他的代码调试并更正)

核心功能:传入代码段,输出高亮格式化后的HTML代码,代码太长,就贴一个入口函数,其他函数自己下载后查看

...

function updateGML(input_str) {

    // User-defined tweaks
    let use_lines       = true;
    let use_docs        = true;  
    let use_copy        = true;
    let use_tooltips    = true;

    let snippet_name = "GML代码段";

    let gen = gm_generate(input_str,
        snippet_name,
        use_lines,
        use_docs,
        use_copy,
        use_tooltips
    );

    return gen.return_html;
}

...

3.使用wp官方编辑器代码区块添加额外css

我的想法是在原有Wordpress编辑器block区块的代码区块进行扩展,如图:如果需要显示gml高亮,就添加一个额外的css:gml,否则就当做普通代码进行高亮。

通过这个区块编辑出的代码是这样子的:

<code class="other-css gml"></code>

4.嵌入到wordpress中

最后,写一段代码,代码功能是把所有<code class="gml"></code>的内容转换成高亮

新建gml.js,在主题的footer中引入 ,代码如下

//需要GML的代码用code包括,block就是<代码>。


//load函数用于动态加载
var scriptList = {};
function load(url, callback) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    document.body.appendChild(script);
    scriptList[url] = script;
    if(typeof(callback) !== "undefined"){
        script.onload = function () {
            callback();
        };
    }
}

//页面有GML class,就加载js并运行
if(document.getElementsByClassName('gml')[0]){
load("https://www.qiushurong.com/wp-content/themes/niRvana/assets/minify/gml_syntax.js", function () {

    while(document.getElementsByClassName("gml")[0]){
        
        var input_str =  document.getElementsByClassName("gml")[0].innerText;
        input_str = input_str.replace("<code>","");
        input_str = input_str.replace("</code>","");
        var gen = updateGML(input_str);
        document.getElementsByClassName("gml")[0].outerHTML= gen;

    }
    gz_copy_refr();

});

}

代码解析:load函数用于判断当前文章有没有gml,核心是updateGML(input_str), updateGML 函数处理了代码的高亮,它的核心是调用了 gml_syntax.js 的 gml_syntax 函数,在文章最后面我提供了我自己的可以参考

函数官方文档解析并提示

在 updateGML 函数中的 use_docs :是否使用官方文档进行函数提示和链接,如果这个为true,那么还需要引入官网提供的docs.js,为了方便,我集成在一起了(提供的js文件的最后一行就是docs.js的内容)

如果不想进行解析提示,就让 use_docs = false,然后删掉const gm_functions的赋值即可。

感谢阅读!

转载必须注明来源: 小树技术博客 » 让WordPress支持GML语法的高亮和函数提示

0 条回应