PCロール

PCロール

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

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

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

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

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

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

Python

code
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

code
javascript
編集モード
let hoge = 1;
hoge++;
console.log(hoge);

C

code
cpp
編集モード
#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

code
html
編集モード
<body>
  <main>
    <a href="#" class="effect"> BUTTON </a>
  </main>
</body>

CSS

code
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

code
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`

> quotation
>
> > [ガジェロール](https://gajeroll.com/)

[![alt text](https://gajeroll.com/wp-content/uploads/2021/10/gajeroll.png)](https://gajeroll.com/)

---

\MORE/ **_italic & bold_**

- [ ] todo
- [x] done :smile:

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

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

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

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

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

← Back to home