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!
event

技術書典7で『Slack App開発レシピ』を頒布します

技術書典7で『Slack App開発レシピ』という技術同人誌を頒布します。(サークルページ) この本は、技術書同人誌博覧会で頒布した『Slack App開発ガイド』の続編になります。 開発ガイド

tip

Node.jsでファイルを直接実行した際にしか動かない処理を書く

Node.jsで他のファイルから呼び出すためのファイルを書いた時に、その関数をいい感じに実行したいと思ったことはないだろうか?具体的にはテストから呼び出すほどでもない用途でnode index.jsを

event

フロントエンドNightで『JSXでつくるDSL』というLTをしてきた

gifteeさんのオフィスで開催された『フロントエンド Night #1』というイベントでLT枠を頂き『JSXでつくるDSL』というLTをしてきました。 > 話したこと話したこと JSXから

lt