某储备粮的“学习笔记”

by 咳嗽di小鱼

在网上找了下Typecho的Markdown插件, 有两个版本, 主要区别如下

  • 明城制作的Markdown插件

    • 浏览时转换Markdown=>HTML
    • 数据库保存Markdown文本
  • ichuan制作的Markdown4TE

    • 保存文章时转换Markdown=>HTML
    • 数据库保存HTML文本

这两种实现都各有利弊, 我个人倾向于ichuan的做法.
原因无外乎, 能保持Typecho文章数据的一致性, 以前存HTML现在还是存HTML, 只是编辑的方式变了.


但ichuan的插件在用的时候不是那么顺利. 因为js放置的位置好像有些问题, 编辑器和预览99%的时候加载失败(Chrome 17). 预览界面的CSS定义也有些问题.

于是自己动手丰衣足食, 把成果po出来给和我碰到同样问题的朋友们.

  • 保留了原插件的保存和读取部分
  • 重新构造了编辑器部分

    • 使用了和Stack Oveflow一样的最新PageDown编辑器
    • 编辑器带实时效果预览
    • 完整定义了各种格式的预览效果

Mar 19/2012 v0.2.1

  • 修复了无法插入附件的BUG

下载

https://github.com/gregwym/Markdown4TE/zipball/master

Github

https://github.com/gregwym/Markdown4TE

有图有真相

Markdown编辑器截图


效果展示部分

H1

H2

H3

strong text
emphasized text
strong & emphasized text


enter link description here

Blockquote

enter code here
  1. List item



    • List item

47 comments »

  1. 很少写文章,还没有接触Markdown

    1. Markdown是个好东西啊...`

    2. 这点我绝对认同

  2. 这个好。
    自己本来也准备改造的,现在看来不用了。
    主题也一并拿走。

    1. 哈哈`非常荣幸. 我准备晚些把这俩东西都扔到Github上去, 如果有问题欢迎提bug.

  3. ethanchen ethanchen

    刚装完typecho,拿来试试. 评论称呼加星啊,同学。

  4. ethanchen ethanchen

    启用插件的时候500错误

    基于 Typecho 0.8 | 10.8.15 构建

    1. 我重新搭个环境测试下...

    2. 解决了, 是文件夹名字的问题...改成Markdown就可以了. 已经把插件移到对应的位置, 重新Commit了. 谢谢

  5. nmc nmc

    IE下编辑器不生效?

    1. 确实不兼容.
      IE在js里对"class" "for"这样的词做了保留, 但用mootool定义新的页面元素必须要用到class属性. 所以要想兼容, 就得改用jQuery.
      实在需要的话, 晚些我改改吧. mootools对IE的兼容实在有点差.

    2. 不过只是辅助工具栏和预览不生效, 编辑还是没有问题的. 不影响编辑和发布效果.

  6. 这几天论坛上又出了一个类似的,比知道比这个如何

    1. 啊哈`你刚刚发的那个QQ编辑器? 不同风格嘛...Markdown还是更Geek一些.

    2. 哦...`看到你说的那个了. 我没用过, 但他是基于明城的版本修改的, 而我是用ichuan的修改的.
      这两种实现方式的不同之处我在文章开头解释了. 我个人喜欢后者.

    3. 如果我用的话 我也喜欢后者

    4. 测试下看看样式 谢谢啦

  7. 恩,我发的!很多不会用Markdown,虽然我不用编辑器!你看现在用wp的人,不就是觉得wp资源多,傻瓜呗!你有精力可以做下啊!

    1. 好的, 我留个链接, 有空时候做一下.
      http://forum.typecho.org/topic.php?id=2475

    2. typecho因为没有自带编辑器一直被人误解,这个QQ版的感觉还不错,估计以后用的人会很多!

    3. 其实Typecho本身对文章文本有一定的处理...`只是处理的方式比较诡异= =. 我有很长时间都把它的处理过程屏蔽掉, 然后直接写html, 直到改用Markdown.

    4. 哈哈 也发现那个诡异的问题了 尤其是more标签的问题

  8. 蚂蚱 蚂蚱

    哈哈,我找到的也是这两个

  9. 代码发出来好像要被过滤,还不大搞得懂用法。

    1. 行前缩进4个空格, 就是代码. 注意代码段之前要空一行. 在预览里可以看出效果.

    2. 原来是这样,挺好用的编辑器,对了,高亮采用什么呢?

    3. 我这个主题自带的Google Code Prettify

    4. 学习学习!

  10. 我一直不明白,typecho为什么后台要做的那么不友好呢

  11. 如果可以快捷的输入 _blank 属性就好了,感觉想要新窗口打开页面,还只能输入html代码。可以实现可视化么?

    1. Markdown本身好像没有这样的特性...不用html, 直接可视化应该是不可行. 我自己的解决方案是, 在theme里给文章内容里的所有链接都+_blank属性.

      $('.entry-content a').attr('target','_blank');
      
    2. 这样,会不会使侧栏的链接也会新窗口打开呢?

    3. 侧栏不在.entry-content里...不会被影响 (不同的theme用的tag可能不一样)

  12. 那可以具体的帮我看看这个要放在我博客的css哪段代码上呢?

    1. 这是jQuery的javascript, 具体可以看我博客的源码.

    2. 这个完全就是外行了,完全没思路,不会弄了

  13. Markdown我咋就不适应呢。。。

    1. 适应了就非他莫属了, 哈哈

  14. hpcex hpcex

    我装了这个markdown插件,出现这个错误,奇怪啊。
    Notice: Undefined index: linkID in d:\APMXE5\htdocs\te\usr\plugins\Markdown\markdownify\markdownify.php on line 412

    1. em`markdownify不是我写的, 你可以去http://milianw.de/projects/markdownify/下载个最新版本的文件替换下试试. 这个问题应该和你的运行环境有关, Windows/PHP版本之类的.

    2. hpcex hpcex

      好的 谢谢

  15. 这个太深奥了。。折腾不明白

  16. 楼主我添加之后,为啥前台没有效果呢...
    帮忙看一下可以么..
    http://fengsu3.net/archives/47.html

    1. 你页面的源代码里是有效果的, 但你的CSS第18行里, 把h1, h2, h3, h4, code, pre这些tag的效果都给清除了, 所以看不出来. 调整一下你的CSS吧

    2. code标签好像也失效了..

  17. 提一个个人的建议。可以增加一个全屏编辑功能,进入全屏的时候提供一个实时预览,预览窗口放到右边,和编辑窗口对半平分整个屏幕。
    主要是现在这样文章写长了的话还要滚动到下面去看预览。

    1. 嗯`写长文章的时候确实比较麻烦. 只是很久没弄博客, 不太有精力改这个插件. 等新版Typecho发布, 应该就用不到这个啦! 期待ing...

Add new comment »

Enter your comment here...

captcha
请输入验证码