白嫖worker 自建短链服务 Url-Shorten-Worker 变身日记本 NetJournal 支持Markdown

现在要来解决使用效果了. 谁也不想日记本里面只能用文字+emoji+ascii艺术吧.

那想一想, 最好的解决方案就是 Markdown 了.

启发

找 GPT 一问, 给了一个很好的例子.

https://devv.ai/zh/search?threadId=dbr3kt6te3uo

核心代码就是这一小段

document.getElementById('markdown-content').addEventListener('input', function () {
  const markdownContent = document.getElementById('markdown-content').value;
  const htmlPreview = document.getElementById('html-preview');
  htmlPreview.innerHTML = marked.parse(markdownContent);
});

实践

把这一段抄到我们的index.html里面去, 添加一个card, 里面显示我们当前输入的Markdown文本的效果.

还可以把这样的显示效果融合到显示列表中.

function buildValueMarkdown(longUrl) {
  let valueMarkdown = document.createElement('div')
  valueMarkdown.classList.add("form-control")  
  valueMarkdown.innerHTML = marked.parse(longUrl)
  return valueMarkdown
}
buildValueItemFunc = buildValueMarkdown

在调试过程中, 发现一个问题. 如果我把日记内容写得比较复杂, 里面就会带上一些 [] ! () # 这类符号, 并且还有换行.

当我在index.html调用API去查询单条记录的时候, 报错说json格式有什么问题. 但是我用 loadKV 去查询全部的时候, 一切正常.

查了一下代码, 发现 loadKV 的实现, 是 API 的 qryAll 命令, 是先用 JSON.parse 搭一个 json 的初步结构, 用一些JS的语法把数据结构填充了数据之后, 再用 JSON.stringify 变成 json 数据再走HTTP返回.