大道至简: 用pre统一txt与html来记笔记

  笔记软件层出不穷,乱花渐欲迷人眼。但深入体验过txt格式的极致开放、精简,领略过Vim等编辑神器的自由逍遥后,很多人返朴归真,近乎偏执地用Vim以txt格式来记笔记者。客观来讲,图片或简单格式也偶有需求。这种情况下,html是更好的选择。于是,思考:能否将txt与html统一起来呢?pre标签即可解决此问题。
  所谓统一txt与html,就是在普通txt的开头加一个pre标签。这样,作为txt,它仍能在文本编辑器中,方便地阅读、编辑、搜索。同时,又能在浏览器下直接保持格式显示——免除了<br>换行、失去行首缩进的烦恼——从而为图片展现提供可能。也就是说,这种统一格式,在Vim中就是txt,在浏览器中就是html;可以理解为扩展的txt,也可以理解为极度精简的html。至于文件名后辍,纯属表象,任君选择。重要的它的实质:既得到了vim编辑txt的便利,又得到了浏览器显示html的功能扩展。【重要说明:本文是经验分享,并非推荐方案。本来就偏执txt/html/vim者,可读此文获得技巧。原本有其他工具的,请略过此文。】

pre 标签

  pre 标签,是以txt为html的关键。它让txt中的tab缩进、回车换行仍能保留在html中。
  但直接 pre 会导致过长的文字撑宽浏览器,要想自动换行,需要如下写法,以兼顾不同浏览器:

<pre style=”word-wrap: break-word; white-space: pre-wrap; white-space: -moz-pre-wrap” >

img 标签

  要支持图片,只须 <img src=xxx.png> 标签。
  通常,图片连号,可以复制/粘贴,然后,通过 Ctrl+A 和 Ctrl+X 直接加减即可。比如,复制一个 src=img-5.png,光标放在5上,按下2 ctrl+x,就成了 img-7.png (vim理解数字为负5,减2,得负7)。

h2 标签

  为了在htm中有所突出,可增加一些标题标签。

如何快速在浏览器打开当前文件 

  在gVim中,“最基本”的命令是——
  :!%
  !表示外部命令运行,可以理解成windows的运行之类。
  %表示当前文件。
  因此,上述命令就相当于在文件管理器双击此文件(从这方面讲,建议文件后辍为htm,以便于浏览器打开)

  改进包括:
  - 在!前增加silent,以跳过cmd窗口。
  - %放在双引号中,兼容路径含有中文或空格的情况。
  - 进行map,一键运行。

  这样的htm基本等于txt,既可以充分发挥VIM的能力,又能兼顾图片,比较满意。

附:相关syntax文件

abb <buffer> zpre <pre style=”word-wrap: break-word; white-space: pre-wrap; white-space: -moz-pre-wrap;”>
inoremap <buffer> ;h2 <esc>^i<h2><esc>$a</h2><esc>F<i
vnoremap <buffer> ;h2 “zdi<h2><C-R>z</h2><esc>F<i
inoremap <buffer> ;i <img src=”" alt=”[image]“><esc>3F”i
inoremap <buffer> ;st <strong></strong><esc>bba
vnoremap <buffer> ;st “ydi<strong><C-R>y</strong><esc>F”i
inoremap <buffer> ;l <a href=”"></a><esc>F”i
vnoremap <buffer> ;l “ydi<a href=”"><C-R>y</a><esc>F”i
inoremap <buffer> ;bq <blockquote></blockquote><esc>bba
inoremap <buffer> <s-enter> <br/><cr>

附录:文章更新历史

  2009-12-21:重写。
  2006-07-05:初稿。


B1:已有评论24 条

  • oo: 2009-12-21 21:42, #13467

    善用佳软:
    你好, 看到这篇文章我很高兴, 我找笔记软件已经五天了(相比自己以前这已经是很长时间了), 今天才感到这才是我真正想要的。
    不知道是因为看到您的一些文章受您影响还是我自身的原因, 对笔记软件我很是挑剔, 一方面觉得自己做笔记要长期保存, 不希望用太复杂的格式,又觉得图片很必要,纯文本不能满足我的需求, 同时我还有一定的开源情节 并且希望软件在Linux上同样好用,看到很多开源软件后来都商业化了就不想用了。
    看到这篇文章我真的很兴奋,在这里我最想说的就是希望善用佳软把这篇文章的位置提前些吧,让更多像我这样的人尽快看到它,省去不必要的时间。
    最后再次感谢善用佳软,从这里我获益很多。

    回复

  • yibie: 2009-12-22 9:07, #13469

    原来如此,不过还希望 xbeta 大大,能更详细的解释一下,键盘操作的指令~

    回复

  • yibie: 2009-12-22 9:13, #13470

    另外,这些配置,是直接写在 Vim 的配置文件中的吗?

    回复

  • 真的金龙: 2009-12-22 9:19, #13471

    与其这样,还不如找个网络版的记事本更方便

    回复

  • Windie Chai: 2009-12-22 9:23, #13472

    这么繁琐的步骤,而且还要记住指令,我觉得花钱买一个OneNote更值。

    回复

  • sice: 2009-12-22 9:27, #13473

    也就是说,将上述syntax放到ztx.vim中,用ztx格式来做笔记?
    如果是的话,请教一个简单问题,如何调用浏览器看这个笔记?用vim中的命令,还是用vim菜单里的转换命令将ztx转换为html?
    我是初学者,不好意思,请教一些基本的问题
    【善用佳软/2009-12-22:只要做相应配置,任意后辍都可以。但我是采用了html文件后辍,所以,上述syntax放在html.vim中。使用时,在TC中找到xxx.htm,F4调用Vim编辑/查看;需要浏览器打开时,或者在TC中Enter,或者在gVim中:!%(详见上文)。】

    回复

    sice: 2009-12-22 19:27

    谢谢,因为我学习vim就是从善用佳软开始的,所以沿用了ztx高亮语法,非常方便

    回复

  • Bobo: 2009-12-22 9:52, #13474

    最近尝试用TiddlyWiki做笔记,真的很不错,跨平台兼容性超强~(没法不强,本来就是个网页嘛)

    回复

  • cb: 2009-12-22 18:00, #13478

    谢谢xbeta!!!这就是最理想的东西了,再次感谢。

    前阵子用了你介绍的Voof,后来发现直接用mark的折叠就OK了,毕竟自己知道折叠内部的东西和内容组织,就不需要左边的树形结构了。

    回复

  • amao: 2009-12-22 19:15, #13481

    建议看一下reStructuredTEXT,纯文本文件,简单的语法,很方便的转换为其他格式:html, latex等

    回复

  • rfRe: 2009-12-22 20:31, #13486

    据我所知,许多人调试笔记软件的时间比记笔记的时间多三到五倍。

    回复

  • lilyhcn: 2009-12-22 21:48, #13488

    现在一般的事情用mimipad2,
    学习笔记我用lyx(可视化latex)可以打公式,可以生成专业的pdf,也可以生成网页。也是用纯文本记录的。几十M的文件也可以轻松打开。
    还可以有目录,太强大了!~~

    回复

  • noname: 2009-12-23 14:19, #13495

    还是善用佳软的简单使用。

    回复

  • oo: 2009-12-23 14:35, #13497

    昨天看了下reStructuredTEXT,感觉语法规则太多,对我来说感觉还是善用佳软的更易用些,我做笔记这就足够了,以后有机会再学习强大的docbook。

    回复

  • hx0hx: 2009-12-23 19:53, #13502

    我的想法是:开发一个 chrome 的插件,作为笔记软件。
    这样的话,只输入纯文本肯定没问题,对于 web 格式更是原生支持的了,就是说从网页上复制下来的东西能完美再现。提供一些简单的编辑功能,满足更多的需要。不用提供复杂的功能,毕竟不是网页制作工具。
    日记嘛,重要的是内容。

    回复

    发条狐狸: 2009-12-25 18:57

    要是你可以开发一个Opera的就更好了.

    回复

    chu: 2009-12-28 22:44

    opera本身就有笔记功能,可以随opera link同步,而且可以保存笔记的网址等,非常方便

    回复

    oo: 2009-12-25 20:34

    不知道你看过piggydb没有,希望会对你有用。

    回复

    发条狐狸: 2009-12-26 21:45

    Piggydb是不是需要java的?可以放到家用路由器上面吗?还有浏览器里面的东西和浏览器外的东西联结不是那么紧密吧?

    回复

  • cb: 2010-01-01 22:20, #13874

    请教xbeta,一个打开当前行链接的vim脚本怎么弄?

    例如我的文本有一行内容为:
    2010-01-01_215638.jpg

    该图片与当前编辑文本存放在同一个目录,目标是在当前编辑文本所在目录打开这一行这个文件,请问如何编写快捷键映射?

    以前水木有个高人给过一个参考,如下:
    :vm :le url=@”gvy:silent!!cmd /c start ”
    但是只能实现全路径打开vim中选定的url,但是当我的文件夹移动位置的话,就需要重复修改url了,所以请教直接打开当前编辑文件夹所在目录的方法。

    回复

  • cb: 2010-01-01 22:21, #13875

    上面没显示完整那个参考,不知这里是否支持Pre标签,
    试一下,

    :vm :le url=@”gvy:silent!!cmd /c start “

    回复

  • cb: 2010-01-02 22:10, #13895

    我上面的问题用utl这个vim扩展搞定了,请xbeta处理掉上面我的问题吧,谢谢。

    回复

  • fxpro: 2010-04-29 16:56, #16795

    恩,试用看看。。。

    回复

  • kyros: 2010-05-16 8:56, #17009

    这个文章最核心的还是在大道至简,看xbeta的文章,一定记住是免费软件,开源的。

    我感觉vim确实很万能,需要全心投入的学习和体会之。

    回复

我要发表评论

您的留言:
NOTICE: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!

 名称/Name (* 必需)
 邮箱/Email (* 必需)
 链接/Link