gist

ラベル Markdown の投稿を表示しています。 すべての投稿を表示
ラベル Markdown の投稿を表示しています。 すべての投稿を表示

2012年5月8日火曜日

サンダルを履くようにブログを作成する「flipflop」

flipflopは、作者曰く「サンダルを履くような感覚でブログを作成できる」パッケージです。markdown形式で記事を書けます。記事は手動で書きます。

$ npm install -g flipflop

flipflop create でプロンプトが表示されるので、ブログの情報を入力します。

$ flipflop create
prompt: Blog title: My Blog
prompt: Blog description: This my blog site
prompt: May I create your blog @ "/Users/inouetomoyuki/Projects/node/my-blog"?: yes

my-blog というディレクトリが作成されます。早速起動してみます。

$ cd my-blog
$ flipflop start
/Users/inouetomoyuki/Projects/node/my-blog/articles
info:   http server listening. port=8080

http://localhost:8080 にアクセスします。

トレードマークなのか、サンダルが表示されます。シンプルなブログです。

記事を追加するには、articles ディレクトリに markdown形式で記述します。

その前に作者を登録します。blog.jsonを以下のように書き換えます。

{
 "title": "My Blog",
 "description": "This my blog site",
 "keywords": [],
 "authors": {
  "bradharris": {
   "name": "Brad Harris",
   "gravatar": "bmharris@gmail.com",
   "github": "bmharris"
  },
  "tomoyuki": {
   "name": "Tomoyuki INOUE",
   "gravatar": "sample@gmail.com",
   "github": "tomoyukiinoue"
  }
 },
 "articles": "articles",
 "domain": "http://yourdomain.com"
}

サンプルの記事をコピーして作ってみます。

$ cp -R articles/flipflop-ftw/ articles/hello-world

article.json に記事のメタ情報を記述します。authorには、blog.jsonに追記した作者のキーを記述します。

{
 "author": "tomoyuki",
 "title": "Hello World",
 "date": "05/09/2012",
 "publish": true,
 "tags": [
  "flipflop",
  "sample",
  "node.js"
 ]
}

article.md に記事の内容を記述します。

# flipflop

## サンダルを履くようにブログを作成しよう

+ **[markdown][]** - 記事をMarkdown形式で記述できます。
+ **[jade][]** - テーマをJadeテンプレートと[less][]でカスタマイズできます。
+ run it from a [node.js http server](#start-er-up), or [generate a static site](#static-sites-are-hawt) that you can host pretty much anywhere and not worry about dependencies.

---

## インストールする

**flipflop** はグローバルインストールすることでcliを提供します。

```
> npm install -g flipflop
```

## 新しいブログを作成する

```
> flipflop create
```

This starts a cli app that will prompt for a few bits of info about your blog, and create a directory for it in the `process.cwd()`.

## 起動する

Make sure you're inside your blog's directory.

```
> flipflop start <port>
```
check your browser @ `http://localhost:8080`
+ port is optional, defaults to 8080

起動してみます。

lessを使ってテーマも変更できます。2つのファイルだけで記事を追加できます。サンダルを履いたようには簡単、かもしれません、たぶん。

2012年4月23日月曜日

SublimeText2でMarkdownをプレビューするプラグイン

sublime-markdown-previewは、SublimeText2でMarkdownをプレビューできるようになるプラグインです。

このプラグインは、sublime package manager 経由でインストールします。



Sublime Package Manager インストール

まず、Sublime Package Managerのインストールから。

SublimeText2 を起動して、[Sublime Text 2]>[Preferences]>[Browse Packages]へ進みます。

Finderが起動するので、Installed Packages という名前で新しいフォルダを作成します。

ダウンロードしたPackage Control.sublime-packageInstalled Packagesにコピーします。

次に、SublimeText2でControl+` でコマンドライン入力を表示させます。

以下をコピーして、コマンドラインにペースト、Enter。

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installedpackagespath(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.installopener(urllib2.buildopener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

SublimeText2を再起動します。

確認してみます。

[Sublime Text 2]>[Preferences]>[Package Control] で以下の画面が表示されたら インストール成功です。



sublime-markdown-preview のインストール

いよいよ、Sublime Text 2 MarkDown Previewのインストールです。

sublime package managerでインストールします。

Command+Shift+PでSublime Package Managerを起動し、Package Control: Install Packageを選択します。

インストールできるパッケージの一覧が表示されます。

Markdown Previewを選択します。

ネット経由でダウンロードとインストールが始まります。(ステータスバー)

しばらくするとインストールが完了します。(ステータスバー)

キーバインドを追加します。

[Sublime Text 2]>[Preferences]>[Key Bindings -User]を選択します。

以下のように書き換えます。

[ { "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser"} }]

これでインストールと設定が完了です。

Alt+mでMarkdownをプレビューしてみます。

ブラウザが起動し、プレビューできます。



Markdown記法で

Markdownは、プログラマには必須スキルかもしれません。テキスト形式でバージョン管理でき、レビューもしやすいです。仕様やメモ書きにもってこいです。スタイルもクールです。WordやExcelの仕様書とはおさらばして、Markdownで書きたいですね。