rehype-remnote#
写了一个可以从 RemNote 导出的 .rem 文件中生成 hast 的 包。hast 是 rehype 所用的抽象语法树,实际写下来感觉还是挺方便的。
.rem 文件结构#
新的 .rem 文件本质是一个 .tar.gz 压缩包(以前则是 .zip),解压后有一个 rem.json 文件,里面包含了所有笔记的内容。应该是为了节省空间,所以这个 JSON 中很多字段的名称都很难以分辨。于是写了一个测试各种样式的页面,导出看效果,根据效果修改代码。
文件的结构大概是这样:
整个 docs 的结构是扁平而有序的,通过 _id 来找到对应的内容。对于单个 Doc
,主要的内容在 .key 中。.key 中存储的内容是 (string|object)[]
。对于一张卡片,如果有涉及到闪卡的部分,可能会把背面的内容放在其他地方。
一些特殊的 block 类型会存储在几个特殊的 block 中,比如
如何使用#
可以参考 Rem.astro 文件。
- 如果你只需要最后的 HTML,那么可以调用
rem2Html
。
- 如果你需要将 rem.json 的内容提交到版本管理系统中,那么建议你先调用
hydrate
来生成一个精简的、树状的 JSON。
- 如果你想要走完整个
unified
的 pipeline,得有一个 parser 来初始化 unist:
如果你想要直接传 string 的话,可以跳过 process
的步骤,自行调用相应的 stage。
| ........................ process ........................... |
| .......... parse ... | ... run ... | ... stringify ..........|
+--------+ +----------+
Input ->- | Parser | ->- Syntax Tree ->- | Compiler | ->- Output
+--------+ | +----------+
X
|
+--------------+
| Transformers |
+--------------+
rehype-remnote/style
提供了一些基础的样式,可以导入使用。
TypeScript 类型体操之一个 Record
要么有一组 kv 的全部,要么全部没有#
处理 rem.json 的时候发现很多时候结构体中的部分字段要么同时出现,要么同时不出现,遂有了下面的一些类型体操。你也可以在操场上玩耍。
如何在服务端(Astro SSR/SSG, etc.)使 UnoCSS 对动态字符串生效#
RemNote 中可以设置文字和背景的颜色,可以是预设的颜色,也可以是自定义的颜色。因此我对应生成了 Tailwind 的 class 名。
但是,原子化 CSS 框架 UnoCSS 作用的原理是使用正则表达式扫描源码来生成规则。为了防止最终的结果 diverge,所以不会扫描产出结果。这意味着在 Astro 中,即使是 SSG 模式下也无法处理 JS 动态生成的字符串。
(其中 atob(y)
的结果是 <span class="text-yellow-600">yellow</span>
)
解决方案#
unocss
提供了一个 createGenerator
方法,可以用来生成 CSS 字符串。
接着,在使用到的地方就可以调用我们的函数来生成 CSS 字符串了。
---
import { generateUno } from '@/scripts/uno';
const r = `<span class="text-red-600">红色</span>`;
const y = atob('PHNwYW4gY2xhc3M9InRleHQteWVsbG93LTYwMCI+eWVsbG93PC9zcGFuPg==');
const style = await generateUno(y);
export type Props = {};
---
<style is:global is:inline is:raw set:html={style} />
<div set:html={r} />
<div set:html={y} />
<div class="text-blue-600">蓝色</div>
我在玩什么#
巴别塔圣歌#
巴别塔圣歌 Game 2023-09-06
Chants of Sennaar
by RUNDISC
类型:冒险 平台:PC / PS4 / Xbox One / Nintendo Switch / XSX
高塔上的各个民族语言不通由来已久,传说某个旅人某日将破除隔阂,将他们团结起来。走进这座别样而又迷人的巴别塔,仔细观察、聆听,才能破译古代文字。
《Chants of Sennaar》
寻觅往昔的只言片语,揭示过去的秘密
自从创世之初,高塔各族便已分隔,彼此不再有言语往来,只是据说某日,某位旅人获得了智慧,能够推倒高墙,恢复天道。走进引人入胜的世界,探索缤纷诗意的设定,感受巴别塔传说的奇妙,帮人们忆起往事。置身庞大的迷宫之中,走过无穷无尽的阶梯,揭示苦涩的真相,揭晓迷人世界的秘密。在这里,你会发现:古老的语言既是锁头,也是钥匙。
踏上别有天地的旅途,破译有趣的古代文字
- 探索美妙而又迷人的世界,体验扎实的叙事,以不同的形式领略巴别塔的神话
- 仔细观察周围环境,破解谜题,揭开身边的秘密
- 利用潜行和智慧巧胜卫兵,穿过常人不可入内的禁区
- 破译古代文字,令高塔各族恢复联系与交流
玩到了第三层。有些地方很关键(比如第二层第一次出现双语对照文本的时候),如果错过了就会卡关。
第二层的地图把我搞得晕头转向的。
破译的另一大难点是画得很抽象。
这两天由于 Pulasan,降温很厉害,搞得我感冒了。恍惚间让我回忆起去年(还是前年)的秋天玩《2077》的时候。
我在看什么#
网络炼狱:揭发N号房#
사이버 지옥: n번방을 무너뜨려라网路炼狱:揭发N号房网络地狱:N 号房现形记Cyber Hell: Exposing an Internet Horror
by 崔真星
类型:Documentary
一个可以匿名使用的在线聊天室,一个性犯罪的温床。揭发2019年震撼韩国的网络聊天室恶行。
分数都是给事件内的人物的。作为作品,表现手法比较欠缺。即使事件很大一部分都发生在网络上,但也没能看到一些像《网络迷踪》那样新颖的镜头设置,很多都是干巴巴的打字。
在技术上也有很多露馅的地方。比如,P 上去的右键菜单,레드팀用来钓鱼的背景的代码是原型链相关的操作。
评论