アプリケーション

Ulysses でHTML タグを貼り付けたい場合は「ソースブロック」にしておくと良さげ (Ulysses に HTML エンコードされてしまう問題)

@rabirgoです。

Ulysses をブログエディタとして使おうとした時に最初に悩んだことは、上記 書き出しの一文でした。WordPress 上で <p><a href="https://twitter.com/rabirgo">@rabirgo</a>です。</p> になるよう投稿したいのに出来なかったのです。

Ulysses の HTML エンコード処理が邪魔だった

TextExpander に Snippet として登録しようとしたところ、以下の問題に当たりました。

<a> タグを使うと Ulysses の HTML エンコード処理が走る

Ulysses から WordPress に投稿すると、WordPress 側でこうなってしまいます。

&lt;p&gt;&lt;a href="https://twitter.com/rabirgo"&gt;@rabirgo&lt;/a&gt;です。&lt;/p&gt;

Ulysses で使える Markdown 記法が分からない

私(Markdown がっつり使ったことありません)が一般的だと認識している Markdown 記法の[rabirgo](https://rabirgo.net)[rabirgo https://rabirgo.net] と書いてみてもリンクになってくれません。

一旦チルダで解決、複数行でまた壁

WordPress 投稿後に <a> タグ入れるしかないかなと悩んでたら、どこかで「Ulysses 側で先頭に ~(チルダ) 入れたら良い」と書いてあり、入れてみると確かに解決しました!

ただ、その後複数行に渡る(改行込みの)HTML に当たると再び悩むことになりました。改行がある場合、最後の行の行末に ~(チルダ) を入れるだけでは解決しませんでした。

例えばアプリーチは一行で HTML を書き出してくれるので問題ありませんが、最近 私は使ってない「カエレバ」は複数行の HTML を書き出していたと思います。

理解は100%ではないけど、これで良さそうな解決策

結果的には該当の HTML を選択して「ソースブロック」にすると意図した動作になってくれました。

Ulysses 側でいくつかのブロックを実験Ulysses 側でいくつかのブロックを実験
WordPress 側で意図通りになったのはソースブロックWordPress 側で意図通りになったのはソースブロック
ビジュアルエディタでの見た目ビジュアルエディタでの見た目
ビジュアルエディタでの見た目一応プレビューでも確認

(画像では一部バッククオートが効いてませんが、今回のこととは関係ないので気にしないことにします)

言葉としてコードブロックとソースブロックの差が分かりませんでしたが、コードブロックだと HTML エンコードされてしまい、ソースブロックだと HTML エンコードされずに WordPress に送信してくれました。

参考

Tutorials – Code Blocks
コードブロックに関する公式ページは見つけました。(英語の長文で読めてません)
ソースブロックは見つけられません。

さいごに

Ulysses にブログパーツ(HTML)を貼りたくても、HTML エンコード問題で WordPress に貼っていたような場合、これで解決になればと思います。

ちなみに冒頭の文は <a> タグ込みの文章にして、チルダで囲って TextExpander に登録しています。

TextExpander - rabirgo ですTextExpander – rabirgo です
ABOUT ME
rabirgo
うさぎ年(rabbit)おとめ座(virgo)生まれの rabirgo です。 2019年よりフリーランスとして活動しています。 よかったら Twitter フォローお願いします! Follow @rabirgo

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です