wp-gfm v0.9

GitHub上で公開している自作のMarkdownのWordpressプラグインを更新した。

https://github.com/makotokw/wp-gfm/releases
GitHub Flavored Markdown for WordPress

内部で使っているphp-markdownのバージョンアップと、フッターのデザインを少しポップにしてみた。

Markdown記法はWordPress本家のJetPackプラグインで出来るので基本的にはそちらを使えばいいはず。

wp-gfmはショートコードで囲った部分だけMarkdown変換するように作ってあり、Jetpackに乗り換えて過去記事を変換しなおすのが面倒なので使い続けている(メンテナンスし続けている)ところではあり、もともとソフトウェアエンジニアしか興味ないだろうと思ってGitHubにひっそり公開しているだけなのだが、何故か定期的にがつけられている。しかも大半が海外の人になっている。

ひょっとして世の中にはJetpackが使えない環境があるのだろうか? wp-gfmのスタンスとしては名前のとおりひたすらGitHubのMarkdownに記法、デザインを寄せるということでやっているのでそのあたりが良いのかもしれない。

WordPressで埋め込みMarkdown

ソフトウェアエンジニアにしか需要がないだろうと思い本家プラグインディレクトリではなく、GitHub上で公開しているMarkdownのWordpressプラグイン。

https://github.com/makotokw/wp-gfm/releases
GitHub Flavored Markdown for WordPress

外部のMarkdownを埋め込み表示できないか?というissueをもらったので対応してみた。

[embed_markdown url="https://raw.githubusercontent.com/makotokw/wp-gfm/master/README.md"]

というようなショートコードで埋め込みができる。GitHubではraw.githubusercontent.comでrawコンテンツが取得できる。

ここから下の内容はhttps://github.com/makotokw/wp-gfm/blob/master/README.mdの埋め込み表示となる。面白いから作ってみたけど需要はあるのだろうか。

GitHub Flavored Markdown for WordPress

wp-gfm is the WordPress plugin that convert from GitHub Flavored Markdown by using the PHP-Markdown or GitHub Render API.

Dependencies

How to work

The plugin has two conversions.

[markdown] as shortcode for PHP-Markdown, convert by using \Michelf\Markdown class inside WordPress.

[gfm] as shortcode for GitHub Flavored Markdown, convert by using the Render API outside WordPress. Default Render API is GitHub Render API, limits requests to 60 per hour for unauthenticated requests. Alternatives Render API that works on heroku is here: https://github.com/makotokw/ruby-markdown-render-api

Installation

Download from https://github.com/makotokw/wp-gfm/releases and upload to /path/to/wp-content/plugins/wp-gfm

PHP-Markdown (Recommended)

This conversion depends on PHP Markdown Lib 1.7.0.

Usage

Use [markdown][/markdown] as shortcode on entry.

Example:

[markdown]
| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |
[/markdown]

Fenced code blocks

Example:

[markdown]
```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```
[/markdown]

Table of content

left aligned toc.

[TOC]

right aligned toc.

[>TOC]

Example:

[markdown]
# headLineOne

## something

[TOC]

## something more
[/markdown]

Embed content

Supported embed markdown file by [embed_markdown] shortcode.

[embed_markdown url="https://raw.githubusercontent.com/makotokw/wp-gfm/master/README.md"]

Option

Admin > Settings > WP GFM

  • AutoLink (default: no)
  • Code block template
    • (default: <pre class="prettyprint lang-{{lang}}" title="{{title}}">{{codeblock}}</pre> )
<pre class="prettyprint lang-ruby">require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
</pre>

You can use google-code-prettify if you want to allow syntax highlighting.

GitHub Render API

This way is not good. If there are 5 shortcodes in page, the plugin require 5 HTTP requests.

Setup

  • Open WP GFM Settings and set Render URL

Usage

Use [gfm][/gfm] as shortcode on entry.

[gfm]
```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```
[/gfm]

Result

Result

Development

npm install
grunt debug

LICENSE

The MIT License

Current Version

The line below is used for the updater API, please leave it untouched unless bumping the version up 🙂

~Current Version:0.9~

自作WordPressプラグインでグロースハック的なこと

去年くらいからグロースハッカーって言葉を聞くようになった気がする。本も読んだけど広告的なことにお金を掛けずとも、マーケティングのスペシャリストじゃなくてもサービスを成長させるための何かだったような、ちゃんと覚えていないけど。

Hotmailとかでメールにhotmailの登録のリンクを加えるとか、iPhoneのiPhoneから送信などはサービスを使っているユーザから使っていないユーザに広める意味でグロースハックみたいなことが書いてあったのは覚えている。

というわけで自分で使ってて便利だと思う自作のWordPress Markdownプラグインにて、変換を使ったときは the_content フックを使って、With Markdown By wp-gfm ってのを加えるようにしてみた。

デフォルト無効だけどオプションがあるので、他に広めたいという気さくな方は設定で Add a link of wp-gfm plugin to content みたいなチェックボックスを有効にしてみてください。

とりあえずグロースハックって言い張る。

WP GFMでTable Of Contentsに対応してみた

WordPresでMarkdown使うWP GFMを作ってて今回TOCを使えるようにしてみた。

JetpackプラグインでMarkdownが使える

WordPress.comでMarkdown記法が使えるようになった機能Jetpackプラグインで取り込まれたので、もう開発しなくていいかなと思っていたけど部分的に使えないようなのでひとまずWP GFMを継続中。(WP GFMでは[markdown]で囲った部分だけがMarkdown記法になるので他の記述やプラグインと共存が容易)

さて、QiitaでMarkdownで書いた記事に目次が表示されるようになって便利やなーと思ってた、さらにAmazonJSの説明ページがどんどん長くなって読みづらくなってきたのでTOCをつけてみようと思った。

PHP-Markdown + TOC

実装方法を検索したところjtopjianさんが、PHP-Markdownの拡張でTOC対応していた(php-markdown-extra)ので参考にさせてもらった。

PHP-Markdownにはdocument_gamut、block_gamut、span_gamutと3段階のシーケンスがあって、この修正ではまず見出しの変換を改良して<h2 id="xxx"/> のようにidをつけ、document_gamutでhタグを検索して目次を作成して追加するという処理になっている。

しかし[TOC]という文言を他の場所で使うとdocument_gamutの処理で置換の対象になってしまいよからぬことが起きたので、まずspan_gamutで[TOC]が単体で書かれている箇所にマークをつけ、document_gamutでそのマークを変換するようにした。

TOCの記法

TOCの記法、表示についてはRedmineのWiki記法を参考にした。

[TOC]は左寄せ、[>TOC]は右寄せになる。CSSスタイルも参考にした。

見出しのIDについて

これはjtopjianさんの実装によるものだが見出しを## Header {#headerId} と書いた場合に headerId をidとして使うようになっている。それ以外の場合は post-{id}-md-{n}nが連番でつくようにしている。

このブログだと連番が1から始まっていないが、調べるとこれはヘッダのmetaタグのdescriptionを記事本文を使って出力しているからだったつまりthe_contentが2回呼ばれていて、2回目のthe_contentで連番のnが続きになっている。the_contentごとにリセットすることも考えたがidが重複しないこと優先し、値は動的に変わってもいたしかたないと考えることにした。他のページからアンカーへリンクを貼りたい場合は {#headerId}を使ってIDを静的に指定すれば良い。

実行結果

このページでも使ってみているけど、AmazonJSの説明ページは全体を把握しやすくなったと思う。

WordPressコメント内でMarkdownを使う

コメントでサンプルコードを提示するときにひどく面倒だったのでWP-GFMプラグインでコメントにもMarkdownを使えるようにしてみた。

しかし、コメントは少し使い勝手が悪い。WordPressの場合、コメントの保存時にエスケープ処理が走ってしまうので、Fanced Code Block内のコードもエスケープされてしまう。そのため記事のようにデータとしてはMarkdownのテキストで保存し、表示の際にコンバートするということができない。

他のシンタックスハイライトプラグインなどを参考にするとやはり表示のタイミングではなく保存時に変換しているので同じようにすることにした。そのためコメントでMarkdownが使えるけど保存はhtmlに変換して行われるので保存後に(Markdownとしての)編集ができなくなる。しかし現行のWordPressの仕組みではしょうがないようだ。

WP-GFM ちょっと更新

WordPressでMarkdownつかうプラグインちょっと更新。php-markdown 1.4にあげてみた。

https://github.com/makotokw/wp-gfm/releases
GitHub Flavored Markdown for WordPress

Fenced Code Blocksに対応したみたいけどもともと自前で拡張していた。

WP-GFMではシンタックスハイライトは対応していない。その代わりに管理ページからFenced Code Blocksのテンプレートを設定できるようにしているので各自で好きなもの使ってくださいというスタンス。で僕はgoogle-code-prettifyを使っているだけど、さらにタイトルを表示できるようにテンプレートの設定を変えてみた。

Default
<pre class="prettyprint lang-{{lang}}" title="{{title}}">{{codeblock}}</pre>
After
<div class="code-frame"><div class="code-caption"><span class="code-filename">{{title}}</span></div><div class="highlight"><pre class="prettyprint lang-{{lang}}" title="{{title}}">{{codeblock}}</pre></div></div>

タイトルの部分凝るのがちょっとむずかしい。テンプレートは単に {{var}} を置換しているだけなのでFenced Code Blocksにタイトルを設定していないときに .code-caption を表示しないなど凝ったことができない。妥協。

google-code-prettify のテーマ

テーマいろいろ見つけたので紹介。

Dark系テーマにしようと思ったんだけど結局、GitHubテーマ に落ち着いた。

WordPressをMarkdownエディタにする

GitHubからWordPressのMarkdownプラグインをアップデートしました。バージョン0.5。

WordPressの記事内で [markdown] で囲むとMarkdown記法が使えるというプラグインなんですが、「俺はMarkdownしか使わない。ショートコードしゃらくさい」というリクエストをもらい面白そうなのでそういうオプションをつけてみました。

設定 > WP GFMですべてのコンテンツをMarkdownにするにチェックを入れるとthe_contentにフィルタをかまして自動でMarkdown記法として変換します。これによってWordPressのエントリ全てがMarkdownで書けます。他のthe_contentフィルタによる変換と干渉するかもしれないのであんまり推奨できないんですけど俺はMarkdownしか使わない!という強者にはいいかもしれません。

あと地味に Fenced Code Blocks を使った時の出力方法をテンプレートで設定できるようにしたのでお好きなシンタックスハイライトを使うことができます。

WordPress用Markdownプラグイン更新 v0.4

そんなことよりWordPressでMarkdown書こうぜ。

さてMarkdownをWordPressのエントリで使うプラグインGitHub Flavored Markdown for WordPressにおいて変換機能自体は更新がないけどプラグインとしては少し重要なアップデートをした。

makotokw/wp-gfm
GitHub Flavored Markdown for WordPress

プログラマ向きだからといって GitHub に公開して、アップデートについては git pull でもしてくれ、という運用だったけどこれだと面倒以前に、更新しても気がついてもらえないという問題があった。これを解決すべくGitHubに置いたWordPressプラグインの自動更新機能を追加する WordPress-GitHub-Plugin-Updaterを組み込んでみた。

一応動いているようなのでGitでインストールしている人はアンインストールするか現在のバージョンのディレクトリを退避して master.zip から最新版をインストールしてください。プラグインの自動更新の際にディレクトリが置き換わるので .git や config.php などのファイルは消されてしまいます。config.phpにあったRender URLはWordPressの設定画面に移行しましたのでそちらに設定してください。

さて僕自身の主な WordPress + Markdownの運用ですが、kobito アプリでメモを書き、内容によってQiitaにあげるかブログに上げるかを選んでいます。最近ではプログラミング系はQiita、それ以外のサーバ構築の備忘録などはブログという感じです。ブログの場合はkobitoアプリからコピペしているのでkobitoアプリとの互換性を重視しています。

WordPress用GitHub Flavored MarkdownプラグインでFenced code blocks修正

ブログにMarkdownで書こうとした備忘録がうまく動かなくてバグに気がついたのでGitHub Flavored Markdownプラグインを修正しました。バージョン 0.3。

makotokw/wp-gfm
GitHub Flavored Markdown for WordPress
使う人がComposer使わなくてもいいようにGitリポジトリに依存ライブラリも突っ込んだのでGitでバージョンアップ(pull)するときは先にvendorディレクトリを消してください。

でFenced code blockの話。例えば以下をmarkdownショートコードで囲った場合

```ruby
# require 'redcarpet'
# markdown = Redcarpet.new("Hello World!")
# puts markdown.to_html
```

以下でちゃんとコードハイライトされていたらプラグインは正常に動いています。

# require 'redcarpet'
# markdown = Redcarpet.new("Hello World!")
# puts markdown.to_html

前のバージョンでバグってたのはMarkdownでは#は見出しに使われるので、blockの変換順序のせいでFenced code blockを判定するときにもう中身がh1タグになっていました。#だけじゃなくて他にもMarkdown記法が入っていると先に変換されていた恐れがあります。0.3からは真っ先にFenced code blockの変換を行います。

さて最初のバージョンではユーザに変換用にWebAPIを構築することを前提としていて導入しづらいのでプログラマ向けにGitHubにあげていたのですが、だいぶPHP-MarkdownでのGitHub Flavored Markdownモドキが使えるようになってきたのでもう少し導入しやすくして普通に公開してもいいのかなと思って来ました。

でもGitHubは便利だしWordPressのプラグインディレクトリにあげるのは面倒だし、GitHubからバージョン通知できたらいいなと思って調べていたらWordPress-GitHub-Plugin-Updaterを見つけたのでちょっと調べてみる予定。

そんなことよりWordPressでMarkdown書こうぜ

PukiWiki for WordPressの作者でもありますが、Markdownに一本化しようかと思っています。つーかWiki系の記法をいくつも覚えてられない。

んでGitHub Flavored Markdown for WordPressというプラグインをGitHubに上げているんですが実はこっそりいろいろパワーアップさせてバージョンを0.2にしました。

https://github.com/makotokw/wp-gfm
GitHub Flavored Markdown for WordPress

このプラグインのGitHub Flavored Markdownの変換は外部のウェブサービスに任せる方法なのでブログの表示パフォーマンスが著しく低下してしまいます。ウェブサービスをherokuにあげてるけどDynoが寝ちゃうし、仮に叩き起こしていたとしてもアーカイブページでMarkdownのブロックが5個あったら5回herokuにHTTPリクエスト投げるわけでスマートな解決とはいえないのです。

やっぱりローカルで解決したいんだけどローカルでruby動かすのは人によって敷居が高いかもしれないのでPHP-Markdownクラスを改良する方向性を目指そうかと考え始めています。

個人的にはもともとGitHub Flavored Markdownが使いたいというのは表とコードシンタックスハイライトを簡単に使いたいという目的に対する手段でした。

MarkdownのTable拡張はPHP-Markdownから来ているのでPHPの実装はすでにあります。あとは```での Fenced code blocksが使えればいいということで```で囲ったら<pre class="prettyprint"><pre>を吐き出すようにこっそり改良しています。

google-code-prettifyと合わせて使うと、markdownショートコードでも```でコードハイライトができます。言語の指定には対応できていないし、ハイライトはgoogle-code-prettifyに依存しているのでGitHub Flavored Markdownもどきですが、個人的にはこれで十分です。

なおこのプラグインではPHP-MarkdownはComposerを使って依存モジュールとしてインストールします。

cd /path/to/wp-content/plugins
git clone git://github.com/makotokw/wp-gfm.git
cd wp-gfm
composer install

面倒くさいのでzipでパッケージ化はしていない・・・