読者です 読者をやめる 読者になる 読者になる

記事の書き方(ソースコード記載_RunstantLite)

他の人のブログで、ブログ上でソースを書いてそれが即時反映されるツール?のようなものが貼ってあるのを見たことがあった。
少し調べてみたらRunstant Liteというものらしい。試してみた。

Runstant Lite

ブラウザ上で動くエディタ&プレビューツールらしい。ログイン不要で使いたいときにすぐに使うことができるようだ。

早速試してみる

ブラウザ上でコードを作成

まずは以下にアクセスする。
lite.runstant.com

すると、エディタが立ち上がるのでそこにソースを書く
f:id:taiga1021kou:20170312004823p:plain

右上のShareボタンを押下すると、URLが出てくる。これをブログに貼り付ければ事足りそうだ。
f:id:taiga1021kou:20170312004829p:plain

ブログでの見せ方

コピーしたURLをブログに貼り付ける。
普通に貼り付けると、いつものようにカードかURLのタイトルをブログに貼り付けることになる。
f:id:taiga1021kou:20170312004835p:plainf:id:taiga1021kou:20170312004841p:plain

だが、ここで一工夫して、iframeというHTMLタグにこのURLを入れてみる。
f:id:taiga1021kou:20170312004846p:plain

すると、エディタ画面がブログに埋め込まれ、その場でソースの編集やその結果を見ることができる。
しかもURLにソースの情報が入っているらしいので、更新をすれば編集前に戻せるという。
f:id:taiga1021kou:20170312004851p:plain


普通にはり付けた時の実行結果
カードをクリックすると別窓でエディタ画面に遷移する。
goo.gl

iframeに入れた時の実行結果
ブログ上でエディタ画面を表示する。

はてなブログはHTMLをそのままかけるからできるのか。便利だ。