WebDesigner's Memorandumウェブデザイナーの備忘録

MacDownでシンタックスハイライト機能を使う方法と設定

MacDownでシンタックスハイライトを使う

MacDown(Mac専用のMarkdownエディタ)でたまに文章を書くときがあるのですが、今までコードのシンタックスハイライトは出来ないものだと思っていました。

MacDownデフォルトの状態

しかし環境設定を見ると、普通にシンタックスハイライトに関しての項目があったので、今回は設定と使い方について書いておきます。

シンタックスハイライトの設定

MacDownの[環境設定]→[レンダリング]→「コードブロックをシンタクスハイライト」のチェックを入れて、テーマやアクセサリの選択をすればOKです。

MacDownの環境設定

アクセサリというのは、コードブロックの右上に付くラベルのようなものです。
「言語名」を選択すると設定した言語名、「カスタム」を選択するとファイル名などを表示できるようになります。

使い方

まずコードブロックの書き方ですがバッククォート(`)3つでコードを囲みます。
言語の指定をしたい場合は開始バッククォートの後に言語名を記述します。

```css
// CSSの場合
css{
  background: #fff;
}
```

MacDown シンタックスハイライトONの状態

「アクセサリ」で「カスタム」を選択している場合は、言語名の後にセミコロンとファイル名を記述すれば表示されます。

```css:style.css
// style.cssとアクセサリを表示させたい
css{
  background: #fff;
}
```

ファイル名を表示させたい場合

 

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね