コードスクリーンショットの問題点とその解決方法

あなたは自分がとてもよく知っているテーマについてチュートリアルを書こうと決めました。そのテーマには非常に詳しく、コードを手のひらのように知っています。

このチュートリアルには多くのコードが含まれており、見た目が良くなくてはなりません！そこで、コードエディタのスクリーンショットを撮るか、Carbonのようなツールを使ってPNG形式の素敵に見えるコードスニペットを生成するかのどちらかです。

これで、地味で不格好なコードスニペットを使わずに済みますね！

console.log("Hi!")

全画面表示モードにする

問題点

ブログにコードの写真やスクリーンショットを貼り付けると見た目は良いですが、2つの大きな問題があります。

1. ユーザーがコードをコピーできません

コーディング中に問題に直面したと想像してください。Googleで検索し、素晴らしいチュートリアルを発見しました。明確で簡潔な説明とコード例があります。自分の目的に合っているかどうかを確かめるために、そのコードを試してみたいと思いますが、読んでいたコードが実は_スクリーンショット_だったとしたらどうでしょう？頭を抱えたり、画面に向かって叫んだりして、他の記事を探しに行くでしょう。

ユーザーもまさにそれをします。

しかし、もう一つ、より大きな問題があります。

2. コードの画像はアクセスしにくい

スクリーンリーダーを使う人にとって、画像というのはそのaltテキスト次第です。では、どうしますか？コードスニペット全体をaltテキストとして書く？いいえ、そうすべきではありません。スクリーンリーダーを使う人はあなたのコードを読むことができません。

解決策

これらの問題の解決策は非常にシンプルです。

マークダウンを適切に使う

まずやるべきことは、コードスニペット用にマークダウンを適切に使うことです。コードを追加する場合、この構文を使うべきです：

console.log("Hi!")

全画面表示モードにする

DevToやHashnodeのようなブログプラットフォームでは、コードスニペットの色付けサポートが素晴らしいです：

console.log("Hi!")

全画面表示モードにする

トップのバッククォート(`)の隣に言語を記載するだけで、自動的に色が付きます：

```javascript
console.log("Hi!")

全画面表示モードにする

**でも自分のブログで書いている場合はどうすればいいですか？**

#### HighlightJSを使う
-----------------------------------

自分のウェブサイトやブログで、アクセスしにくいスクリーンショットやCarbonの画像なしに、コードを美しく見せたい場合は、[HighlightJS](https://highlightjs.org/)のようなJavascriptライブラリを使うことができます。[使い始めるためのチュートリアルはこちらです](https://savvas.me/tips/beautiful-code)。

### 結論
-------------------------

ブログには力を入れており、コードを含む全てが素晴らしく見えることを望んでいます！イメージやスクリーンショットとしてのコードスニペットは簡単な方法に聞こえるかもしれませんが、訪問者にも考えてください。後で使用するためにあなたのコードをコピーしたい訪問者や、スクリーンリーダーを使ってあなたの投稿を読むことしかできないユーザーのことを。包括的に。人間らしく。

読んでいただきありがとうございました。<br><br>こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。<br>[https://dev.to/savvasstephnds/the-problem-with-code-screenshots-and-how-to-fix-it-2ka0](https://dev.to/savvasstephnds/the-problem-with-code-screenshots-and-how-to-fix-it-2ka0)