markdown快速插入GeoGebra交互动图

参考视频教程

软件的安装

1. 在线模式

在线版的优势是可以不需要下载离线包, 非常方便

1.1. 具体步骤

上面的代码分两块:

要想支持3D图, 需要修改div标签的id
id="ggb3d1 , id="ggb3d2, id="ggb3d3 ...

这种方案对博客园也是生效的, 前提条件得申请博客园的js

1.2. 导出html

1.3. 细节

  1. 可以在.md的文件顶部, 插入代码

    ---
    export_on_save:
    html: true
    ---
    

    这样可以自动生成html文件, 最后配合下python脚本, 可以修改自定义样式, 以及自动部署到服务器中

  2. 推荐一些vscode好用的markdown插件

    • Markdown Preview Enhanced
    • Paste Image 插图很好用
    • Markdown TOC 书签
    • Markdown All in one 会有智能公式提示
    • Markdown Editor 所见所得
  3. 更多markdown教程, 参考 https://kz16.top/md/

2. 离线模式

之前用到的是在线的cdn, 其实也可以用离线cdn, 这样可以确保在断网的时候也可以用, 所以得先下载离线包, 下载地址为

https://kz16.top/ggbppt.7z

下载后需要解压

值得注意的是, 如果想完全离线, 就需要从vscode中导出html的文件格式为offline的格式

2.1. 全部离线的md文件

下面用到了相对路径, 自己可以根据ggbppttest.md的相对路径去设置

生成下面的base64代码, 推荐用
https://kz16.top/geogebra/ggbppt.html

<div id="ggb3" style="height:200px; width:600px; font-size:0">
UEsDBBQACAg... 后面还有老长老长老长的一串字符
</div>


<script src="../../ggbppt/geogebra/deployggb.js">
</script> 
<script type="text/javascript">  
window.onload = function() {
    for(var i=0; i<10; i++){
        var si = i.toString();
        var ggbid = document.getElementById("ggb"+si);
        if(ggbid){
            var para={
                "width":ggbid.offsetWidth, 
                "height":ggbid.offsetHeight,
                "enableRightClick":false, 
                "enableShiftDragZoom":false, 
                "enableLabelDrags":false, 
                "borderColor":"white", 
                "perspective":"G",
                "ggbBase64":ggbid.innerText
            };
            var applet = new GGBApplet(para, '5.0');
		    applet.setHTML5Codebase('../../ggbppt/geogebra/5.0/web3d/');
            applet.inject('ggb'+si);
        }
    }
}; 
</script>

2.2. 说明

window.onload = function() {
    for(var i=0; i<10; i++){
        var si = i.toString();
        var ggbid = document.getElementById("ggb"+si);
        if(ggbid){
            var para={
                "width":ggbid.offsetWidth, 
                "height":ggbid.offsetHeight,
                "enableRightClick":false, 
                "enableShiftDragZoom":false, 
                "enableLabelDrags":false, 
                "borderColor":"white", 
                "perspective":"G",
                "ggbBase64":ggbid.innerText
            };
            var applet = new GGBApplet(para, '5.0');
		    applet.setHTML5Codebase('../../ggbppt/geogebra/5.0/web3d/');
            applet.inject('ggb'+si);
        }
    }
}; 

这样离线版可简化为

生成下面的base64代码, 推荐用
https://kz16.top/geogebra/ggbppt.html

<div id="ggb3" style="height:200px; width:600px; font-size:0">
UEsDBBQACAg... 后面还有老长老长老长的一串字符
</div>

<script src="../../ggbppt/geogebra/deployggb.js">
</script> 
<script src="./ggbmd.js">
</script> 

返回