【CodeZen】プログラミング言語を綺麗に画像化できるツール

Webサービス

CodeZenのアイコン

この記事では、入力したプログラミング言語(コード)を綺麗に画像化して、JPG、PNGとして保存できるツール「CodeZen」について書きます。

コードをSNSで共有したい時などに便利です。

CodeZenのスクリーンショット

プログラミング言語などのコードを綺麗に画像化できるウェブサービスです。Macっぽいボタンが左上に表示されて、ウィンドウの中に綺麗にコードが収まります。

サイトにアクセスして、画像化したいコードを貼り付けます。言語は、CSS、JavaScript、HTML、Python、PHPなどに対応しています。

そのままPNG、またはJPGで画像保存できます。

フォントサイズ、テーマ、背景の色などを調整できます。ライトモードだけでなく、ダークモードも用意されています。行番号の表示も可能です。

「SNSにコードを共有したい時、無機質なコード画像だとなんか嫌だ!プログラミングできますよ感を出したい!」という方におすすめです。

提供元:Rishi Mohan

アクセス方法

以下のリンクからアクセスできます。

アクセスすると、上部に設定画面、中央にコード入力画面が表示されます。

CodeZenのメイン画面

使い方

コードを書く

サイトにアクセスしたら、画像化したいコードを書き込みます。コピペでもOKです。コピペした後に、その場で改行したり、新しくコードを追加したりできます。プレビューはリアルタイムで反映されるので、完成画像をイメージしやすいです。

試しにCSSのコードを貼り付けてみました。いい感じです。Macのウィンドウって感じです。Mac触ったことないので、分かりませんが笑

画像化したいコードを貼り付ける

コードは、1ページに収まらない長文でも可能です。スクロールできます。

長文のコードを記述して、スクロールしてみたGIF画像

続いて、上部のドロップダウンリストで、テーマや言語を変更していきます。

言語の選択

画像化したい言語を選択します。

Languageでプログラミング言語を選択する

言語は、以下の12種類の中から選択できます。(2022年7月時点)言語によって、配色が変わって見やすくなります。

  • Javascript
  • JSX
  • CoffeeScript
  • Ruby
  • SASS
  • Shell
  • HTML
  • SLIM
  • Python
  • PHP
  • Markdown
  • Clojure
  • C/C++/C#
  • Elm

HTMLを選択して、HTMLコードを貼り付けてみました。いい感じに色がついて、味付けされています。

言語をHTMLにして、コードを書き込んだ画面

テーマの選択

「Editor Theme」で、テーマを選択できます。「Night」にすると、ダークモードになります。

Editor Themeで「Night」にした画面

行番号の表示

「Show line numbers」にチェックすると、行番号を左側に表示します。

「Show line numbers」で、行番号を表示した画面

画像の保存

右上のボタンで画像保存できます。「Save JPG」がJPG、「Save PNG」がPNGです。

「Save JPG」と「Save PNG」のボタン

実際に保存した画像を貼っておきます。普通に、Visual Studio Code(テキストエディター)などをスクショするより、綺麗で美しいです。

CodeZenで作成したCSSのコード画像

個人的には「Material」テーマが好きでした。ダークを基調としていて、目に優しいです。

CodeZenで作成したCSSのコード画像(Material)

Twitterに投稿する際は、画像の説明(ALT)にコードを貼り付けておくと便利です。

画像だけだと、コードをコピペしたい時、めちゃくちゃ大変です。説明に書いておけば、文字としてコピペできます。他の方のためにも、後から自分が見返した時のためにも、書いておくと便利です。

Twitterに投稿する時は、画像の説明(ALT)に画像内に記述しているコードを書いておくと便利

感想

以上、プログラミング言語を美しい画像として出力できるウェブサービス「CodeZen」についてでした。

この手のサービスは、色々あるので、調べてみると面白いかもしれません。サービスごとに特色が異なります。

Posted by ナポリタン寿司