Scriptogram: A highly-visual blogging platform for writing nerds

Cool blogging platform alternative of the day: If you’re looking with something with a little more heft that hits halfway between WordPress and Tumblr, Scriptogram, a Markdown-based blogging platform that integrates with Dropbox, might be your ticket. The theming system will feel at home if you’re a heavy Tumblr customizer, and there’s a level of control here that you may not get with a standard blog post. (There isn’t a rich-text option for writing, though Markdown is a cinch to learn.) And for SEO-focused types, it’s a little better on that front than Tumblr is. If you’re looking for a blog platform that feels like it was built out in 2012, but keeps the blogger in control of their work, this is a good bet. (Editor’s note: I’ve been playing with this all afternoon. It’s fun! — Ernie @ SFB)

Changing YARD's Markup Format to Markdown or Textile.

YARD is amazing. It makes it fun to document code. And it is well known that documenting your code not only makes your code better but it makes you a better programmer.

The saying goes, you don’t really know something until you’ve tried to teach it. Trying to “teach” others (and future you) about your methods through documentation is a great exercise.

Configuring the Markup for YARD

By default, YARD uses RDoc as the default markup language. This is to help the transition of RDoc projects over to YARD. But for new project, I prefer Markdown (GitHub uses a derivative of this) or even Textile (used in 37signals' apps). 

It was difficult to find any documentation on this so I thought I would post a quick entry here for people doing a search.

  1. Create a .yardopts file in your project’s root directory.
  2. In .yardopts put in:
  3. Make sure you have the ‘redcarpet’ gem installed. I would add this to your gemfile under the development and testing groups: 
  4. Run your server and it will automatically append options in the .yardopts file.
Other YARD Options

Again, it took a little while to figure out how to find all the options I could pass into the .yardopts file so here is the command for that: 

yardoc --help

If you’re using Github Flavoured Markdown (GFM), which is the default when you are using RedCarpet as the Markup provider and Markdown as the Markup language, you wil notice that hard-line breaks are not respected. This is done by Loren Segal because when text editors typically have a word wrap set at 80 or 100 “columns” so when you’re writing long paragraphs in your documentation, you naturally use hard-breaks and this would cause the resulting documentation to look a little off. I’ve been using
when I really want a hard break.



I was forgetting certain things about Markdown syntax, and I’m using that to write in for my new blog(A Week Without)…So I decided to make myself a cheat sheet to hopefully help me learn it faster. I thought maybe someone else would find it useful as well, so I have it on Cloud now, anyone can download and enjoy it. :)

Here is the cheetsheet in HTML, straight conversion from the Markdown file! By the way, this was all written on my iPad2, in an app called Elements. It allowed me to easily check my Markdown, I highly recommend the app!

Header Section   Header 1

Header 2

Header 3 Header 4 Block Quote Section  

Block quote    hehe

a block quote inception!   weird right? lets get out of it…  

Header 4 in a block quote!

Emphasis Section  

emphasis or thisway   strong emphasis or thisway

List Section  

Unordered lists:

  • List 1
  • List 2
  • List 3

Ordered Lists:

  1. Numbered List 1
  2. Numbered List 2
  3. Numbered List 3
Linking Section  

Inline link to YouTube

Reference link to YouTube

Image Section  

Code Section  

This is a bit of <html> code in my sentence. This is a lot more <html> code.

int main()
    printf("I'm a whole C program!");
Quick Notes Section  

To add a <br /> yourself, simply add two spaces and a return to the end of a line where you want the break at. Like the example below.

This is a break   in my sentence.

Credits Section  

Made by Sam Gray




Markdown - Wikipedia

↑この説明を読んでも⊂( ・∀・)ワケ ( ・∀・)つワカ ⊂( ・∀・)つラン♪という人多いと思います。僕もわかりません。


 <a href="">Markdown - Wikipedia</a>




[Markdown - Wikipedia](




markdownを使えるようにするには設定ページから テキスト入力形式を「Markdown」に変更するだけです。



# header H1 
## header H2  
### header H3  
#### header H4  
##### header H5  
###### header H6   
header H1

header H2

header H3 header H4 header H5 header H6









>をつけると引用(Blockquotes )

 > ##桃太郎
 > むかしむかしあるところにおじいさんとおばあさんがいました。
 > おじいさんは山へ芝刈りに、おばあさんはゴロゴロしながら家でミヤネ屋を


むかしむかしあるところにおじいさんとおばあさんがいました。 おじいさんは山へ芝刈りに、おばあさんはゴロゴロしながら家でミヤネ屋を



 * りんご
 * ごりら
 * らっぱ
 + りんご
 + ごりら
 + らっぱ
 - りんご
 - ごりら
 - らっぱ
  • りんご
  • ごりら
  • らっぱ
  • りんご
  • ごりら
  • らっぱ
  • りんご
  • ごりら
  • らっぱ



 1. 卵を割る
 2. 焼く
 3. 食べる
 4. おいしい
  1. 卵を割る
  2. 焼く
  3. 食べる
  4. おいしい
















blog::2310 » Markdown文法の全訳

Markdown Cheat Sheet

I was looking for a online Markdown Cheat Sheet today and found only Cheat Sheets with to much noise and disturbing elements. So here is my plain collection based on the build in Cheat Sheet of TextMate.

Phrase Emphasis

*italic* **bold**
_italic_ __bold__



An [example]( "Title")

Reference-style labels (titles are optional):

An [example][id].Then, anywhere  
else in the doc, define the link: 

[id]: "Title"


Inline (titles are optional):

![alt text](/path/img.jpg "Title") 


![alt text][id]

[id]: /url/to/img.jpg "Title"



  Header 1
  Header 2

atx-style (closing #’s are optional):

  # Header 1 #
  ## Header 2 ##
  ###### Header 6


Ordered, without paragraphs:

1. Foo
2. Bar

Unordered, with paragraphs:

* A list item.  
With multiple paragraphs.
* Bar 

You can nest them:

    * Abacus
      * answer
    * Bubbles
      1. bunk
      2. bupkis
    3. burper
    * Cunning


> Email-style angle brackets
> are used for blockquotes.

> > And, they can be nested.

> #### Headers in blockquotes
> * You can quote a list.
> * Etc.

Code Spans

`<code>` spans are delimited
by backticks.

You can include literal backticks
like `` `this` ``.

Preformatted Code Blocks

Indent every line of a code block by at least 4 spaces or 1 tab.

This is a normal paragraph.

    This is a preformatted
    code block.

Note, if you have a Code Block after a List you have to ad 8 Spaces to get the Code Block. With 4 spaces it get meshed up with the list!

Horizontal Rules

Three or more dashes or asterisks:

* * *
- - - -

Manual Line Breaks

End a line with two or more spaces:

old pond . . .   
a frog leaps in   
water’s sound

Escaping Characters

Reserved characters as “_” can be escaped with a “". E.g. to display “_NO_” you should do this:

新手初试 Markdown--Byword,Marked和其他

我有个“坏”习惯:做每件事情之前,都先想尽办法让做事的过程尽可能的顺畅高效。这不,自从周末开始写 Blog 之后,我又忍不住开始琢磨怎么让 Blogging 更爽快了。我的需求是这样的:

  1. 一个支持 Markdown 的文本编辑器,因为 Tumblr 支持 Markdown 而且 Markdown确实很简洁;
  2. 编辑器要具备各种快捷键,方便输入 Markdown的各种 Syntax
  3. 要有好的预览模式,所见即所得是个必要条件;
  4. 云端同步必不可少
  5. 其他 流程简化的办法当然是多多益善。




@disinfeqt 的推荐下,我选择了 Byword 作为主力文本编辑器,@disinfeqt 推荐的理由是:
> 1. 便宜 2. 两个主题 3. 可以换字体(这个很重要,换成 Hiragino Sans GB 就解决中英文行高乱跳的问题了)4. Markdown 支持很完美


  • 界面优雅漂亮,完全不输给以简洁美观著称的 IA Writer,全屏模式和 Focus 模式两者皆有, Byword 有明暗两种主题,Focus 模式还可以选择以段落或是单行方式进行,“打字机模式”也很有 feel ;
  • 快捷键十分丰富,粗体/斜体、标题、列表、引用一应俱全,使用起来也很人性化,比如选择斜体后会一次出现两个“**”,光标自动位于中间便于输入,输入“[ ”的时候也会自动出来前后两个,十分方便,更多的帮助可以看这里
  • 导出的格式丰富,HTML/Word/RTF/MD/PDF 一个都不能少

Byword 的 Preview 也很漂亮,还能直接 Copy Html 代码出来或者导出,不过不能分屏同时显示编辑和预览窗口不太方便,另外加载图片之后 Preview 的速度也有明显的变慢。于是我的目光开始寻找一个更给力的预览帮手。


选择Marked)的初衷是支持一下大牛 Brett Terpstra,因为这个哥们做过很多让我受益的项目,其中 nvALT 一直在用,Instapaper Beyond 也相当给力,所以想都没想就买下了他做的 Marked,当时的念头就是不好用就当捐助了。意外之喜是 Marked 的 Preview 功能相当好用,它可以实时的显示任意支持类型的文件(比如text,md,html等)的预览,和 Byword 正好是绝配。


为了能和 iOS 端保持同步,我在 Mac 端用了 nvALT(本身也是个支持Markdown的轻量级文本编辑器),iOS 端则是 Simplenote,因为还没发现 iOS 上靠 Dropbox 同步的文本编辑器有更简洁易用的。当然,在 Mac 上的所有文件都是保存在 Dropbox 下的,只不过通过 nvALT 和 Simplenote再做了一次同步而已。这样可以用 Simplenote 在iPhone上做些笔记,打打草稿什么的。ok,工具齐备,该开始设置了。

  • Byword 的设置很简单,选择喜欢的主题,设置边距、字体和默认文件格式即可。字体我选择了“Hiragino Sans GB”,大小是19。

  • Marked 的设置也很轻松,在“Behavior”里把 “Byword”设置成默认编辑器。比较可爱的是 Byword 提供了一个给 Marked 用的CSS,在设置里导入后就可以让两者如同孪生一般了。
  • nvALT 的设置选项比较丰富,唯一需要注意一下的就是如下图所示,要在可识别文件后缀里面加上 md,添加的时候加号隐藏在减号的左边,如箭头所示,不知道这个彩蛋不是 Brett Terpstra 开的玩笑。




这又是 Brett Terpstra 写的 Mac 下的系统服务,能够让 Markdown 的工作流更加便捷高效。这些服务包括了常用的 Markdown 格式代码快速生成和一些很有用的辅助功能。

如果用 Byword 来工作的话,那么快捷键可以帮我们搞定 Markdown 的格式代码,不过上图中划红线的几个功能就需要通过“系统服务”来协助了。

  1. Force Line Breaks: 在 Byword 里输入“Enter”的时候有时候并不能被识别为段落结束,而这个功能可以让选中的文本内容实现正确的段落分割;
  2. Link Selection:自动把剪切板里的 URL 与当前被选中的文字生成一个超链接的代码,比如这个
  3. Inline links to refenrences:这个最给力,可以写完整篇文章后执行一次,立马把所有的链接(和图片)的代码都规整一遍,自动转成reference style ([link text][title]),并且把所有的reference link都放在文章的最底部,真是非常方便!


Mac 系统的窗口定位和缩放一直是个让人不爽的缺憾,虽然 Lion 已经支持在窗口的各个边角进行缩放了,但是每次都要手动去操作一下也够烦的。我一直在用一款叫做 Divvy 的小工具来快速操作窗口。如下图,我设置了几个全局快捷键来实现几个最基本的窗口定位和缩放效果:

这样,在打开 Byword 和 Marked 之后,只要快速的按两次快捷键,两个程序就整整齐齐的上下排列好,哥俩整装待命啦。

One More Thing:

写东西的时候经常会查资料、翻文档、截图等等等等,手忙脚乱在所难免。虽然用“Command+tab”就能实现程序之前的滚动切换,但我还是嫌慢,于是就用 Alfred 指定了一堆快捷键,给自己最常用的每个 App 都指定了一个。好吧,我承认这么做有点变态,但是对我来说, “It just works!” Alfred 是我最喜欢且常用的 Mac App 之一,以后有空再来好好聊聊它。

现在圆满了,有了养眼又趁手的兵器,也磨合得服服帖帖了,那你还等什么呢?快去写你的博客吧!我的这篇也刚好写完了 :)

Optimize Your Blogging Workflow with Markdown and Marked

Tessa Thornton:

With limited knowledge of HTML, writers can type out content in a natural markup-free environment, then easily convert their text into properly encoded HTML.

Brilliant article about a minimal workflow with Markdown and the lovely Marked app. A must read for every blogger with a penchant for minimalism. The big thanks goes to Ms. Thornton Tessa.

Mou Markdown Editor

If you haven’t heard of Markdown before, its creator describes it as,

a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).

I’ve heard a lot of good things about Markdown, but have never really seen where such a tool would fit into my workflow. In the past, I’ve typically just created HTML content using a text editor such as Coda or Espresso. Lately, however, I’ve been writing more content and designing less so it doesn’t make as much sense to write all of the HTML code by hand. That’s where Markdown the Mou Markdown Editor comes in handy.

I first read about the Mou editor in this blog post at and was impressed with the app’s preview panel and simple UI. I downloaded a free Beta version of the app and fell in love instantly. I’ve written just about all of my HTML content over the last few days in Mou and have been really happy with the expeience.

In Mou, you write/edit your content using simple Markdown formatting (which can be learned in a few minutes) in the left pane. The right pane provides a real-time preview of the HTML content.

One of my favorite features are the easy export to HTML - Cmd + E to create an HTML document or Actions > Copy HTML to copy the HTML source to your clipboard. When exporting an HTML file, you can choose whether or not to include the CSS.

In some teaser posts on Twitter, the developer notes that future version of the app will include the ability to create custom CSS styes and create lists from the Actions menu.

If you’re a Mac user and spend any significant time writing HTML content, I suggest giving this application a try!

Download Mou

Cool Python Module: html2text

Parts of the Fiesta API (as well as some new features we’re rolling out for Fiesta itself) rely on the ability to automatically generate clean text (markdown) versions of incoming messages. Our parser tends to prefer using the text version of a message if possible, as it’s generally easier to parse than the HTML version. That said, sometimes a message only contains an HTML version - we need a way to generate our canonical markdown representation from that alone. Enter html2text.

html2text is a great little Python module by Aaron Swartz that takes HTML as input and generates a markdown version as output. Here’s an example:

>>> import html2text
>>> print html2text.html2text('''<html><body><p>Hello World</p>
<ul><li>Here's one thing</li>
<li>And here's another!</li></ul></body></html>''')
Hello World

  * Here's one thing
  * And here's another!

The output is nicely formatted markdown text, exactly what we were looking for. The only problem we’ve noticed is that the module has some trouble dealing with malformed HTML. Our approach has been to run things through BeautifulSoup first, which tends to do a great job even with crappy markup.

Convert Markdown on the Pasteboard to RTF

I do a fair amount of work in Markdown these days. I won’t get into the virtues of Markdown here. Chances are, if you have stumbled upon this page you’re already using Markdown and don’t need me to tell you why it’s a good idea.

I wanted a workflow that simplifies composing email in Markdown. Whether I am writing it in a text editor (generally BBEdit or Byword) or in my mail client itself, I wanted a quick way of converting Markdown to formatted text.

The main part of this workflow is a fairly simple shell script, which you’ll find below.

The script takes Markdown text on the pasteboard, converts it to rich text, and puts that rich text back on the pasteboard. This allows you to copy (or cut) a bunch of Markdown text, run the script, and paste it formatted into your email editor.

I have bound the script, using FastScripts, to ⌥⇧⌘D (Alt-Shift-Command-D).

This allows me to write a bunch of Markdown in, select, cut, convert, and paste using the following three shortcuts: ⌘X (Cut) ⌥⇧⌘D (Convert) ⌘V (Paste)

Here’s the script, which I called Pasteboard Markdown to RTF:

#!/usr/bin/env bash


(echo "CSS: $CSS_FILE" ; echo ; pbpaste) | \
/usr/local/bin/mmd | \
textutil -stdin -stdout -convert rtf -format html | \

First, I define a variable called CSS_FILE that points to the CSS file I want to use to format the Markdown file. I took swiss.css from the Marked application bundle (found in /Applications/, copied it to my Dropbox folder, and renamed it to PasteboardMarkdown.css. You can substitute it with whatever CSS you prefer and place it wherever you like. Just make sure the CSS_FILE variable points to it using the proper file:/// URL syntax.

Next is a big Bash one-liner. The MultiMarkdown processor recognizes an input line that specifies the CSS file to be used. That’s what the first echo does. The second echo gives us a blank line (it doesn’t work otherwise). The pbpaste command pastes the contents of the pasteboard to stdout. The two echoes and the pbpaste combine the CSS specifier and the Markdown text from the clipboard.

All of that gets piped into the mmd MultiMarkdown processor, which takes Markdown text from stdin and writes HTML to stdout.

The HTML output is then piped into textutil which, using the options provided here, takes HTML from stdin and writes RTF to stdout.

Finally, the RTF output is piped into pbcopy which takes whatever is written to stdin (in this case, the RTF text) and puts it on the pasteboard.

Note, the script requires Fletcher Penny’s MultiMarkdown processor.

MultiMarkdown Composer
  • MMD 爸爸 Fletcher T. Penney 的作品
  • 格式用不同顏色, 大綱顯示在抽屜視窗, 連結可以點
  • 顯示樣式有 Solarized (dark) 可選
  • 支援 ODB 編輯器協定, 再透過 QuickCursor 加持, 到處都能用
  • MMD 最麻煩的就是表格輸入, 這裡也解決了
    1. 首列標題列用空白加分欄, 分隔列(第二列)自動產生, 之後輸入資料列用 Tab 分欄
    2. 輸入首列資料(第三列), 標題列會小亂, 該列輸入完會排妥
    3. 只要一格太長的話, 會往後推, 整個表格的欄都會自動對好

Only Someone Truly

Only someone truly out there
rocking a crutch, singing, hollow-

leering & sand-besotted—
or whatever you call loam—

for me. That’s who I’d take
to bed. There would be several handmade items
for our hands—but I will not be
a handmaiden. There are rules you see.

If you see a belladonna, free it
with zesty yaps kneaded through time
& Kleenex. That way the bank

can fill up with hobos
limping, barking
& rank.