オンラインエディタ3選、ブログでコード紹介

ブログでプログラミングコードを表示する時にオンラインエディターのjsbin使ってたけど2019年に確認してみると「pro account」じゃないと表示出来ないって言われたので無料でブログにコード貼れるやつ調べました。

codepenかjsfiddleなら無料会員登録でコード貼り付けて、ブログ上からオンラインエディタも動かせるので利用する事にしました。

以下エディターの使い方メモ

JSFiddle

JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsFIddleは無料会員登録でコード載せられる

使い方
https://laboradian.com/embed-html-using-jsfiddle/
https://haniwaman.com/js-fiddle/

 JSFiddle オンラインエディター

JSFiddleちょっと使いにくいかも

  • JSFiddleは自分のブログに表示した時にjavaScriptが1番目に表示されるのが難点
  • 分割表示でコードをプレビューしてくれない

codepen

CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applica...

ツイッター連携から無料会員登録できるので楽です。他人が作った作品も見られて面白いです。

codepen オンラインディター

See the Pen eYYeXJJ by サイト制作する像@相互フォロー (@majime9n) on CodePen.

Codepenは、分割表示や1画面だけの表示もできるので機能的にもCodepenの方が気に入りました。

jsbin

JS Bin
Sample of the bin:

jsbinは有料登録で、自分のブログ上でコードを見せる事が可能です。オンラインエディターとしては一番使いやすいので無料版のエディター機能だけ使っています。上にhtml,css,jsなどのタブがあり縦に仕切られているのが使い易いですね。

使い方サイト
https://wpken.net/tool/online-editor-jsbin

まとめ

JSFiddleとCodepenは無料会員登録でブログにデモコードを乗せる事ができました。使ってみてcodepenの方が使い方を見ずに直感的に操作できて分かりやすかったです。

コメント

タイトルとURLをコピーしました