mottox2 blog

おしゃれなコード画像を生成するCLIツール『Silicon』

tooltoolrust

thumbnail

自分はLT資料を作る際に、『Carbon』というおしゃれなコード画像を生成するWebサービスを利用しています。今回はCarbonをインスパイアした『Silicon』というRust製のCLIツールを発見したので紹介します。

こういった画像がCLIで生成できます。

code2img-190804213221.png (34.7 kB)

インストール方法

Rustをインストールしている前提で次のコマンドを実行します。

sh
$ cargo install silicon

$ silicon --versionでバージョン情報が出力されればインストールは成功です。

利用方法

Siliconは画像化したいファイルのパスと、outputオプションで出力先のファイルを指定して動かします。
次のコマンドはsiliconの利用例です。

sh
silicon index.js -o main.png 

クリップボードのコードから画像を生成できます。
ただし、languageオプションで言語を指定してコードハイライトを有効にする必要があります。

sh
silicon --from-clipboard -l js -o main.png

背景・影色や、ウィンドウコントロール・行番号の非表示、ハイライトのテーマなどのオプションも指定できます。
helpオプションで指定できるオプションを確認できます。

silicon index.js -o test.png --background '#ffffff' --no-window-controls --no-line-number   --theme TwoDark

エイリアスの利用

例の通り、Siliconは多くのオプションを指定することになるでしょう。オプションの初期値を記入する設定ファイルの仕組みも用意されていないので、シェルのエイリアスとして設定することで便利に使えます。

例えば次のようなエイリアスを.bashrcなどシェルの設定ファイルに記入しましょう。
ファイルを引数として与えれば、タイムスタンプをファイル名としたpngファイルが~/Downloadフォルダに生成されるコマンドです。非常に乱暴なエイリアスですが、利便性は高めです。

.bashrc
alias code2img="silicon -o ~/Downloads/code2img-$(date '+%y%m%d%H%M%S').png --background '#ffffff' --no-line-number --no-window-controls"
~/.config/fish/fish.config
alias code2img="silicon -o ~/Downloads/code2img-(date '+%y%m%d%H%M%S').png --background '#ffffff' --no-line-number --no-window-controls"

利用例

ファイルを指定して画像を生成する

shell
$ code2img package.json

クリップボードから言語を指定して画像を生成する

shell
$ code2img --from-clipboard -l js

感想

コードを画像化する上でオフラインでも画像を生成できるSiliconは素晴らしい選択肢になると思います。

ただし、2019年08月04日現在は背景の透明化を行うことができません。しかし、Issueは既に立っているので対応されるのを期待しましょう。

(2019年8月9日追記)透明な背景色が使えるようになりました。
Add support for transparency by Aloxaf · Pull Request #31 · Aloxaf/silicon

B!
dev

CLIで利用するNode.jsの書き捨てプログラムを作成するコツ

プログラマーであれば単純作業をプログラムに任せると思います。今回は備忘録を兼ねてNode.jsで書き捨て前提のプログラムを書く際に、よく使っているテクニックをまとめてみました。 やっていることは同じ

nodejs
event

「技術書同人誌博覧会」にサークル参加してきた

2019/07/27に大田区産業プラザPioで開催された技術書同人誌博覧会(通称「技書博」)にサークル参加してきました。 「ブログを書くまでがイベント」ということですので、新刊の話、次回の新刊、当日

技術同人誌
dev

Next.js 9からTypeScriptの利用方法が変わるのでまとめてみた

ZEIT社が開発しているReact製のフレームワークNext.jsですが、現在v.8.1.1のカナリー版がリリースされています。 v.9では様々な変更が入っていますが、個人的に注目しているのはTyp