PCロール

PCロール

コードブロックのデザインを究極に美しくする

コードブロックのデザインを究極に美しくする

この記事は、Gajeroll Advent Calendar 2022 の 11 日目の記事です。

技術系ブログを書く方は、記事の中にコードブロックを使うことも多いと思います。今回は、見やすいコードブロックを作るために、おすすめのデザインを紹介します。

カラーテーマは One Dark がおすすめ

以下のコードブロックは、コードエディタのAtomに使われている、One Darkの配色で表示されています。いくつかの言語を載せておきましたので、見比べてみてください。

Python

n = int(input())
b = bool(not(n - 2))
for i in range(2, int(n ** 0.5 + 2)):
    if n % i == 0:
        break
    elif i == a:
        b = True
print(b)

JavaScript

let hoge = 1;
hoge++;
console.log(hoge);

C

#include <stdio.h>;
#define N 10

int main(void)
{
    int i, j;

    scanf("%d", &i);
    printf("%d\n", i - 1);
    j = i * i + 10;
    printf("j = %d\n", j);
    for (i = 0; i < N; i++) {
        for (j = 0; j < N; j++) {
            printf("i = %2d, j = %2d\n", i, j);
        }
    }

    return 0;
}

HTML

<body>
    <main>
        <a href="#" class="effect">
            BUTTON
        </a>
    </main>
</body>

CSS

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
}

.effect {
    color: #777;
    font-size: 24px;
    text-align: center;
    padding: 0.3em;
    border-top: solid 2px #555;
    border-bottom: solid 2px #555;
    background: repeating-linear-gradient(-45deg, #fafafa, #fafafa 2px,#eee 2px, #eee 5px);
    transition: 0.3s;
}

a:hover {
    box-shadow: 4px 4px 0 0 #ddd;
}

Markdown

# headline 1[^1]

## headline 2

| code       | display  |
| :--------- | :------: |
| `*italic*` | *italic* |
| `**bold**` | **bold** |

- ~~list 1~~ LIST 1
  - LIST 2 <!-- memo -->

1. first `in-line code`
2. second `in-line code`
```js:ex.js
const foo = 1;

quotation

ガジェロール

alt text

\MORE/ italic & bold

  • [ ] todo
  • [x] done :smile:

[^1]: ※ 対応状況は環境によって異なります。


## フォントは Roboto Mono がおすすめ

WordPressのプラグインを使えば、デフォルトで等幅フォントが指定されます。コードブロック内のフォントを自分でカスタマイズする場合は、インデントなどを見やすくするために、等幅フォントにするべきです。この記事のコードブロックに使われているフォントは、GoogleフォントのRoboto Monoです。

GoogleフォントのRoboto Monoはこちら
[https://fonts.google.com/specimen/Roboto+Mono](https://fonts.google.com/specimen/Roboto+

Mono)

おすすめのWebフォントについてはこちらも参考になります。
[https://pc.gajeroll.com/design/basic/font/google-fonts/](https://pc.gajeroll.com/design/basic/font/google-fonts/)
← Back to home