プログラミング関連の情報を発信している方は、ブログやSNS上でサンプルコードを共有する機会が多いですよね。
その際に、ただコードを貼り付けるだけでは味気ないです。下記のように色分け（ハイライト）されている方が圧倒的に見やすいです。
当記事では、上記のようなクールで見やすいコードを簡単に共有できるサービス「Carbon」をご紹介します。
Carbonとは
サイト上のエディタに記入したコードを画像やiframe等の形式で共有できるサービスです。様々な言語に対応し、数多くのテーマが用意されているので、柔軟なデザインを実現できます。
また、会員登録やアプリのダウンロード等が不要なため、手軽に使用できる点もいいですね。
Carbonの使い方
基本的には、コードの記述から共有までサイト上で完結します。まずは下記のボタンより、サイトにアクセスしてください。
サンプルコードの貼り付け
エディタには既にコードが記載されているので、こちらに共有したいサンプルコードを入力します。
この時、入力した言語を上記のセレクトボックスからお選びください。
デザインを変更する
エディタ上部のツールバーからデザインを調整できます。こだわりたい方は、歯車アイコンをクリックすると、より細かく調整できます。(ウィンドウコントロールやドロップシャドウ等もなくせます。）
コードを共有する
画像形式で共有したい方は、右上の「Export」を押してローカルにファイルを保存できます。Twitterをご利用の場合は、Twitterボタンを押してすぐに共有できるので便利ですね。
また、サイト上に埋め込むことも可能です。コピーアイコンから「IFrame」を押すと埋め込みコードを取得できます。
取得したコードをWordPressのエディタ等に貼り付けると、下記のようにユーザーが選択・コピーできるようになります。
まとめ
手軽にサクッとコードを共有できるサービス「Carbon」の使い方について紹介しました。本来、このような色分けを行うには、JavaScriptのライブラリ等の使用が必要ですが、その手間を省けるのは非常に便利ですね。
また、下記のプラグインを使用すれば、ハイライト付きのソースコードを記事内に挿入できますので、参考にしてください。
2021年11月現在、このプラグインは6年以上更新されていませんので、代わりとなる下記プラグインをおすすめいたします。 技術系ブログやプログラミングについて解説したサイトを運営していると、ソースコードを記事内に書く機会もあると思います。しかしそのまま記事内にソースコードをただ羅列するだけでは、...
コメント