貼り付けたコードを色分けで見やすくハイライト表示に[Cocoon]

色分けChromebook
Photo by Nick Fewings on Unsplash

取っ付きにくい[コード]を幾分わかりやすく

色分けしたからといって分かるものでないの承知の上ですが、でもそのままでは余計難しそうに見えますから。

シンタックスハイライト、ビフォー・アフター

やはり色分けされた左側のほうが少しは見ようという気になりますよね、たぶん。
(前の記事のハイライト設定前後の画像です)

code表示の比較画面

色分けで見た目が大きく変わります

*ハイライトスタイルは、monokai-sublimeを使用。

Cocoonでの設定方法

設定方法は至って簡単です、ダッシュボードの[Cocoon設定]>[コード]タブを選択、ハイライト表示にチェックを入れ、下の行番号表示にもチェック、あとはお好みのハイライトスタイルを選ぶだけで、シンタックスハイライトできれいに色分け・整理されたコードが表示されます。

Cocoon設定[コード]

※ブロック作成時に[コード]を選び、そこに入力または貼り付けたときにハイライト表示されます。

まずは人様のコードを見て、馴染んで、少しずつ覚えていく

と、いう風に地道に行く所存です。

あとは入力用のテキストエディタがほしいところです。Windows環境でしたら、自分の使うテキストエディタもgPadとかNotepad++Meryなどフリーでも百花繚乱ですが、Chromebookとなると悩みます。画像編集アプリと合わせて探していきたいと思います。

しもた屋
しもた屋

しもた屋の半分隠居の身、また追々と・・・

コメント

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