LoginSignup
1

More than 3 years have passed since last update.

GitHub Actions の出力を色付きにする

Last updated at Posted at 2020-01-14

はじめに

GitHub Actions の出力はシェルスクリプトを色付けする方法で色付けすることができます。
GitHub Actionsの開発ツールなどと併せて使用することで多少見た目をよくすることができるでしょう。
202001150012.png

対象

TypeScript または JavaScript による GitHub Actions 開発者

実装例

使用するパッケージのインストール

yarn add sprintf-js

TypeScript による実装例

color.ts
import { sprintf } from 'sprintf-js';

const COLOR_MAP = {
    'black': 0,
    'red': 1,
    'green': 2,
    'yellow': 3,
    'blue': 4,
    'magenta': 5,
    'cyan': 6,
    'white': 7,
};
const ATTRIBUTE_MAP = {
    'none': 0,
    'bold': 1,
    'underline': 4,
    'italic': 3,
};

type Color = keyof typeof COLOR_MAP;
type Attribute = keyof typeof ATTRIBUTE_MAP;
type Setting = {
    color?: Color;
    backColor?: Color;
    attribute?: Attribute;
};

/**
 * @param {string} text target string
 * @param {Setting|undefined} setting setting
 * @return {string} colored string
 */
export const getColorString = (text: string, setting?: Setting): string => sprintf('\x1b[3%d;4%d;%dm%s\x1b[0m', COLOR_MAP[setting?.color ?? 'white'], COLOR_MAP[setting?.backColor ?? 'black'], ATTRIBUTE_MAP[setting?.attribute ?? 'none'], text);

使用例

main.ts
import { getColorString } from "./color";
import { EOL } from "os";

process.stdout.write(getColorString('test1') + EOL);
process.stdout.write(getColorString('test2', {attribute: 'italic'}) + EOL);
process.stdout.write(getColorString('test3', {attribute: 'underline'}) + EOL);
process.stdout.write(getColorString('test4', {attribute: 'bold'}) + EOL);
process.stdout.write(getColorString('test5', {color: 'green'}) + EOL);
process.stdout.write(getColorString('test6', {backColor: 'green'}) + EOL);
process.stdout.write(getColorString('test7', {color: 'green', attribute: 'italic'}) + EOL);
process.stdout.write(getColorString('test8', {color: 'red', backColor: 'cyan', attribute: 'bold'}) + EOL);
process.stdout.write(getColorString('test9', {color: 'blue', backColor: 'white', attribute: 'underline'}) + EOL);

実際の出力は以下のようになります。

202001150116.png

2020/10/7 追記

イタリックの指定などのattributeに関して、指定無しの場合(0の場合)にその指定があると色などの指定が反映されなくなったようです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1