[electron] 魔改一个适合自己的Marktext.

1 分钟阅读时长

发布时间:

目录

自定义marktext

与题主面临了差不多的困境, 搜索了一下刚好找到文章, 于是也学着修改并记录一下. 首先是解包, 看起来似乎是一个electron程序, chromium加一(悲):

cd resources
# 解包asar文件
npx asar extract app.asar app
# 打包asar文件
npx asar pack app app.asar

这里的npx实际来自于nodejs的npm管理包, 但是我在archwiki上反应过archwsl1不兼容的问题1, 虽然明确是二进制文件/usr/sbin/node存在问题, 但目前没能力解决, 当前使用的替代方案是直接在官网下载, 官网的包是直接包含npx的2.

修改主题

这里在学习时先照着改了一下功能, 直接找到./app/dist/electron/main.js文件, 其中有函数function Bt(e), 测试了一下, 主题是有上限的(会出bug), 只能直接修改掉其他主题(这里是把one dark主题改掉了, 感觉属于很没什么用的主题):

function Bt(e) {
  const { theme: t } = e.getAll();
  return {
    label: "&Theme",
    id: "themeMenu",
    submenu: [
      //...
      {
        label: "Sakana Light",
        type: "radio",
        id: "graphite",
        checked: "graphite" === t,
        click(e, t) {
          Oe("graphite");
        },
      },
    ],
  };
}

找到./app/dist/electron/renderer.js如下形式的文件:

46024: (e, t, i) => {
        "use strict";
        i.r(t), i.d(t, { default: () => s });
        var n = i(87537),
          o = i.n(n),
          r = i(23645),
          a = i.n(r)()(o());
        a.push([
          e.id,
          ":root {...", // 这里是对应的主题css信息, 虽然是一条长串, 不过可以通过一些特殊手法解决.
          "",
          {
            version: 3,
            sources: [
              "webpack://./src/renderer/assets/themes/one-dark.theme.css",
            ],
            names: [],
            mappings:
              "AAAA;EACE,SAAS...",
            sourceRoot: "",
          },
        ]);
        const s = a;
      },

这里直接复制到新的css的信息到新的文件(比如theme.css), 因为存在格式化字符, 可以使用python完成格式化:

Reverse = True#False

with open("theme.css", "r") as f:
    data = f.readlines()
if Reverse:
    new_data = data[0].replace('\\r','\r').replace('\\n', '\n')
else:
    new_data = ''
    for i in data:
        new_data += i[:-1].replace('\r', '\\r')
        new_data += '\\n'
    new_data = new_data

with open("theme.css", "w") as f:
    f.write(new_data)

将python文件保存在theme.css相同路径, 并通过修改Reverse为TrueFalse实现还原文件格式.

居中

我挺喜欢的居中来着, UIysses的标题居中其实做得挺好, 不过做的是只要属于标题一律居中, 我期望的是大标题居中, 小标题依然左对齐, 于是在编辑过程中可以添加上:

  /* --- Font type ------------------------------------------------ */
  h1, h2, h3 {
    text-align: center;
  }

导出文件配置

稍微改完主题以后稍微往上翻一下, 同样是./app/dist/electron/renderer.js中也存在导出配置的编辑内容, 我认为默认改为自己编写的导出的内容, 可以先定义到if ("academic" === d)位置, 重写成以下逻辑:

if ("academic" === d) {
  const { userDataPath: e } = global.marktext.paths,
    t = ne().join(e, "themes/export", d);
  if ((0, Bt.zE)(t))
    try {
      h += We().readFileSync(t, "utf8");
    } catch (e) {}
}
else if ("liber" === d) h += TA();
else {
  h += SA();
}

但是实际测试了一下并没有生效, 反而出现了奇怪的问题, 至于导出文件的模板可以直接参考修改主题.

其实很多问题到后面反而没有解决, 最近一堆事情忙得不可开交, 也发现了默认博客的一堆局限, 有时间想重新偷个框架来慢慢改, 后续要是能把单文件打开的问题一起解决的话再好好重写一下这篇记录.

参考文献

  1. CryingN.wsl1安装nodejs无法运行[EB/OL].archwiki.https://bbs.archlinuxcn.org/viewtopic.php?pid=62419#p62419.2025-03-04 

  2. 古兰精.linux服务器安装nodeJS步骤及踩坑记录(解决node -v报错cannot execute binary file: Exec format error的问题 - 在Linux中安装适用于arm64位的nodejs)以及node环境项目部署[EB/OL].博客园.https://www.cnblogs.com/goloving/p/14788900.html.2021-05-20