はてなブログ開発ブログ

はてなブログからの公式のお知らせを発信します。

記事を書きながら表示を確認！ 編集画面にリアルタイムプレビュー機能を追加しました

新機能

本日、はてなブログの記事編集画面に、リアルタイムプレビュー機能を追加しました。記事を書きながら、どのように表示されるかをその場で確認できます。

リアルタイムプレビューは、次の編集モードでご利用いただけます。

  • はてな記法モード
  • Markdownモード

はてな記法とMarkdownはともにWebページの簡易記法で、記事を手軽に見栄えよく書くことができます。はてなブログではこれまで、この2つの編集モードを使った場合にどのように展開されるのか、実際に表示させるまで確認できませんでした。リアルタイムプレビューを利用すると、頻繁に「プレビュー」タブを確認することなく、正しく記述できているかを確認できます。

なお、実際にデザインテーマやデザインCSSが適用された見栄えを確認したい場合や、記法を展開する必要のない「見たままモード」では、これまで同様に「プレビュー」タブをご利用ください。

リアルタイムプレビューを使うには

編集画面のテキストエリアの右上に、新しく「リアルタイムプレビュー」ボタンが表示されます。ボタンをクリックするとリアルタイムプレビューが始まります。

「リアルタイムプレビュー」ボタン

右上の「リアルタイムプレビュー」ボタンをクリックして開始

リアルタイムプレビューではテキストエリアが縦に2分割され、左ペインではこれまで同様に記事を編集できます。右ペインでは、入力した簡易記法を展開した表示がプレビューできます。

リアルタイムプレビューの様子です

右ペインではてな記法やMarkdownをプレビューできる

リアルタイムプレビューを終了するには、もう一度「リアルタイムプレビュー」ボタンをクリックします。

リアルタイムプレビューの制限

プレビューをより素早く表示するため、はてな記法の一部はプレビューで展開されません。そのまま表示される記法は以下の通りです。

  • 自動リンク（http記法など）
  • はてな内自動リンク（id記法とfotolife記法を除く）
  • tex記法
  • ウクレレ記法