markdown快速插入GeoGebra交互动图

Author : zbzhen, Modified : Mon Nov 20 19:39:50 2023

参考视频教程

软件的安装

安装vscode, 官网 https://code.visualstudio.com/
在vscode中装插件Markdown Preview Enhanced

1. 在线模式

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

1.1. 具体步骤

创建.md文件, 例如test.md, 嫌麻烦不妨直接下载

在test.md文件写上

# 测试

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

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

上面的base64代码其实也可以从官网的课件案例导出

<script src="https://cdn.geogebra.org/apps/deployggb.js"></script>
<script src="https://kz16.top/geogebra/ggbmd.js"></script>

上面的代码分两块:

第一块是ggbid, 需要插入base64代码,
- 推荐用
  https://kz16.top/ggb/
  点页面左上角保存base64可以自动复制base64代码, 粘贴到md文件对应位置之后, 一定要记得调整显示模式, 输入法切换成英文状态, 按快捷键Alt+Z可调整显示模式, 否则字符过长, 影响编辑
- 也可从官网的课件中导出, 快捷键是
  Ctrl+Shift+B
- 如果要插入多个图的话, 不同div中的ggbid需要不同, 例如这里的例子
  id="ggb3"
  id="ggb2"
- 设置div的高度和宽度数值, 可以改变GeoGebra的界面大小
第二块是js引用
- 由于GeoGebra官网偶尔会出现抽风打不开现象, 也可考虑把
  <script src="https://cdn.geogebra.org/apps/deployggb.js"></script>
  改写成中文镜像提供的js
  <script src="https://ggb123.cn/extdomains/cdn.geogebra.org/apps/deployggb.js"></script>

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

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

1.2. 导出html

先打开Markdown Preview Enhanced的预览, 步奏为:

右键点test.md文件的空白处-->选择Markdown Preview Enhanced
右键点上一步的预览界面, 导出为html文件, 默认会生成test.html, 也就是和test.md同名
用浏览器打开test.html好好享受自己的劳动成果

1.3. 细节

可以在.md的文件顶部, 插入代码
```
---
export_on_save:
html: true
---
```
这样可以自动生成html文件, 最后配合下python脚本, 可以修改自定义样式, 以及自动部署到服务器中
推荐一些vscode好用的markdown插件
- Markdown Preview Enhanced
- Paste Image 插图很好用
- Markdown TOC 书签
- Markdown All in one 会有智能公式提示
- Markdown Editor 所见所得
更多markdown教程, 参考 https://kz16.top/md/

2. 离线模式

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

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

下载后需要解压

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

2.1. 全部离线的md文件

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

../ 表示退出当前这个文件夹,
./ 表示当前这个文件夹,

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

<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. 说明

默认最多只能插入10个GeoGebra交互图
如果嫌弃离线版的js脚本代码太长, 也可以选择用js文件保存起来, 例如在test.md文件夹所在目录创建ggbmd.js, 写上

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/ggb/

<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>