console.logで色付き表示をするメモ

コンソールログの出力に 色をつけたかった

どうやら調べていたら console.log() の出力の際に色々とスタイルを当てられるということらしい

結果的にまず調べたら
console.log('%c色を変更する', 'color: red'); //こうすると全部文字色が赤

console.log('色を変更%cする', 'color: red'); //こうすると する の部分のみ色が赤

%c これをスタイルの当てたい前後で適用すればいける

が複数の場合は？
調べたところ次のようになった

コンソールログで複数のスタイルを当てたい場合

//関数を作ってもできる
  const consoleStyle = (moji) => {
    const styles =
        `font-size: 100px;
         color: red;
         line-height: 2;
         padding: 10px;`;

    console.log('%c' + moji, styles);
  };

 consoleStyle('test'); 

//実行すると testと赤文字、フォントサイズ１００pxなどを指定した上のスタイルが適用されている

///関数じゃなくても当然（メモなので）

const styles =
  `font-size: 100px;
   color: red;
   line-height: 2;
   padding: 10px;`;

const moji = 'test';

console.log('%c' + moji, styles);

まとめ

軽く調べたらコンソールログを変更できるスタイルには限りがあるらしいが
とりあえず複数できるようなので非常にすばらしい

メモとして記録