投稿日:

Markdown(マークダウン)を活用しよう！ブログ記事作成が楽になるかも！？

はじめに

どうも、キーです。
今回はMarkdown(マークダウン)を扱っていきたいと思います。
Markdown…
タイトルではブログの記事作成が楽になると書きましたが、実際には文書作成においていろいろな場面で出てきます。
例えば、エンジニアの知識共有サービスであるQiitaなどもMarkdown形式で記事を書きます。
この記事でMarkdownの存在を知った人に、活用を始めてもらえると嬉しいです。

目的

この記事の目的は以下2点です。

  • Markdownを知らない人に、Markdownの概要を伝えること
  • 私のブログ作成を少し楽にすること

はい。
この記事のメイン私のブログ作成を楽にすることです。
また、Markdownについても使い方の説明はせず、Markdwnとは何かの説明までをします。
Markdownの使い方については正直都度ググるほうが良いので、この記事には書きません。

Markdownとは

はい。いきなり核心ですがMarkdownについては正確に説明するのが難しいため、wikipediaを引用します。

Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。しかし、現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア（コンバータ）も開発されている。各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。
引用：Markdown (https://ja.wikipedia.org/wiki/Markdown)

いろいろと書いてありますが、個人的な感覚で要約しますと、こうなります。

  • 文章を簡単に書くための記述方法です
  • もとはHTML文書を作るために開発されました
  • 今ではいろいろな形式の文書へ変換する方法も作られています

記述方法ではなく言語、あるいは変換するためのプログラムという意見もあるかもですが、大事なのはどう捉えるかではなくどう使えるかなので、一旦これで。

使い方

Markdownの定義は分かりましたが、結局どういったものなのでしょう。
ここでは記法については詳しくやりませんが、最低限例を書きます。
例えば節タイトルとなっている「使い方」は見出しの文字ですが、Markdownを使わずHTMLで記述するとこうなります。

<h1>使い方</h1>

これをMarkdownで記述すると以下のようになります。

# 使い方

元々あまり複雑ではないですが、ものすごく簡単になりましたね。
キータイプ的にも負担が少ないです。
見出しは一つの例ですが、その他にも箇条書きや引用、表など様々なものを簡単に表現して、HTMLで記載したときと同じように表示できます。

注意点

当然ですが、Markdownは万能ではありません。
Markdownは定形的な文章は得意ですが、細かくカスタマイズする場合はHTMLにしてからの変換が必要になります。
また例えば上の例で#を使用したようにHTMLとは違う予約後を使っているため、再現できない文章が出てくる可能性もあります。
よっぽど特殊な状況でない限りは大丈夫だと思いますが、Markdownでうまく書けないといったときには思い出すと良いかもしれません。

Markdown文書作成環境

最近のWebサービスなど、至るところで使用されているMarkdown形式ですがどのような環境が必要でしょうか。
結論としては簡単で、Markdown対応のエディタを使いましょう。
気をつける点として、例えばWordpressの投稿に使いたい場合はHTMLへの変更機能が必要になります。
機能面については自身で使って、気に入ったものを継続利用することをおすすめします。

ちなみに上記のHTMLへ変換する機能を持ったエディタであれば、例えばakatsuki様が作成したWebページで使えるエディタなどがあります。
以下の紹介記事がありましたので、リンクをはらせていただきます。

Markdownで書いてHTMLに変換してブログ投稿する人(俺)に嬉しいMarkdownエディタ作った

実はこの記事の作成時も上記エディタを使用させていただいていたり。。。

おわりに

今回はMarkdown形式についてお話しました。
これによってブログ投稿が少しだけ楽になるといいなと思います。
また、Markdown形式を採用しているWebサービスなどへ投稿するときも楽に投稿できますね。

おまけ

ソースコードをWordpressに投稿する場合は、その部分についてはMarkdown形式はおすすめしないです。
その場合の表示は以下のようになります。

<pre class="prettyprint linenums"><code>
.wrap {
max-width: 1000px;
/* こんな感じ */
} 
</code></pre>

Webサイトにソースコードを載せる方法(1)の記事と同じ表示ですね。正直おしゃれにするにはカスタマイズが必要です。
QiitaなどのWebサービスではサービス側でカスタマイズがしてある(と思う)ので(多分)問題ありませんが。

投稿日:

Webサイトにソースコードを載せる方法3　プラグイン(Crayon Syntax Highlighter)を使おう

どうも、キーです。
前回はgoogle-code-prettifyというJavaScriptを使いましたが、今回はCrayon Syntax Highlighter(くれよん　しんたっくす　はいらいたー)というプラグインを使ってソースコードを表示したいと思います。

なお、本サイトではCrayon Syntax Highlighterのプラグインは利用していないので、説明は画像が中心です。

公式

Crayon Syntax Highlighter — WordPress プラグイン

サンプル

こんな感じになります。

他と比較したときのメリット

  • 導入、使用が簡単
  • 多機能
  • 対応しているプログラミング言語の種類が多い（らしい）

他と比較したときのデメリット

  • プラグインなので積み重なるとサイトが重くなる
  • プラグインの範疇を超えるカスタマイズはできない（プラグインでできることが多いのでデメリットに挙げなくても良いレベル）

使い方

画像でざっくり説明します。

インストール

プラグインを検索してインストールします。


インストールが終わったらプラグインを有効化してください。

ソースコードを挿入

記事投稿ページのテキストモードに追加された「crayon」ボタンを使います。

ソースコードを入力したらAddボタンで確定。
※ツールバーを常に表示しときたい方は次を先に読んでから確定してください。

ツールバーを常に表示する場合などはここを設定しておけば良い。

エディタ上にでる。

ソースコードの修正、設定の変更

ビジュアルエディタの「<>」ボタンから編集画面にいけます。
ただ、前のツールバーの設定なども初期値が入っているので、もう一回すべて編集してから確定する必要があります。

結果

サンプルと同じです。
上の画像取るときは忘れてましたがタイトルにテストと入れています。

感想

導入がものすごく簡単なのはいいですね。
テーマの種類も多く、機能性はとても高いと感じました。

あと、ここに書いてある方法でうまく行かない場合もあると思います。
そんなときにはググりましょう。
ネットはソースを複数確認するのが大事です。

次回はGistを使ってみようと思っています。

参考

よく使われるプラグインなので他のブログさんもまとめていますね。
筆者が読みやすく学習の参考にさせていただいたサイトさんたちです。

Crayon Syntax Highlighterの設定と使い方：記事中にソースコードを表示 | affilabo.com
Crayon Syntax Highlighter – ソースコードを記事上で綺麗に表示できるWordPressプラグイン | ネタワン
Crayon Syntax Highlighterの使い方 | TechAcademyマガジン

 

投稿日:

Webサイトにソースコードを載せる方法2　google-code-prettifyで綺麗にソースコードを表示しよう

どうもキーです。
今回からブログなどにソースコードを載せるときに使える方法として、「pre要素 + code要素」からより実用的なものへ進んで説明したいと思います。

一般的に使わる方法はいくつかあると思いますが、本ブログではその中でも特にメジャーと思われる以下の3つを紹介予定です。

    • google-code-prettify (JavaScriptのライブラリ)
    • Crayon Syntax Highlighter (プラグイン)
    • Gist (GitHubのサービス)

これらは「シンタックスハイライト」という、プログラム中で特殊な意味を持つ単語に色をつける表示をすることができます。
今回は、本ブログでも利用している「google-code-prettify (JavaScriptのライブラリ)」を紹介します。

サンプル

今回は以下のようなイメージでソースコードを表示させます。

<pre class="prettyprint linenums"><code>
.wrap {
max-width: 1000px;
/* こんな感じ */
} 
</code></pre>

google-code-prettifyの種類

google-code-prettifyの使い方は2種類あります。

  1. CDN版
  2. ダウンロード版

CDN版はスクリプトのURLを読み込んで使用します。
ダウンロード版はスクリプトファイルをダウンロードして、Webサーバー上にアップロードして使用します。

ダウンロードファイルのほうがスクリプトファイルを編集できたり、外部のサーバーに依存せず使用できるため、Webサーバに自分でファイルをアップできないなど特別な事情がなければダウンロード版で良いでしょう。

以下ではダウンロード版の使い方を説明します。

準備

  1. ファイルのダウンロード
    現在はGitHub上にファイルが保管されているようです。
    (GitHub – google/code-prettify: Automatically exported from code.google.com/p/google-code-prettify)
    ソース一覧の右上の「Clone or download」から「Download ZIP」を選んでダウンロードしてください。
  2. Webサーバにアップするファイルを選びます。
    今回はまず使い方を覚えるために最小限必要なファイルだけをアップしようと思います。
    ダウンロードしたzipファイルを解答して「loader」フォルダの中から以下の2つを取り出してください。
    ・prettify.css
    ・prettify.js
    「loader」フォルダなどにある、「lang-xxx.js」のファイルはxxxに入るプログラミング言語の予約語を取り扱うためのものです。
    ただこちらは説明すると説明がかなり多くなるため今回は省きます。
  3. 自身のサイトデータを上げているフォルダに「code-prettify」というようなフォルダを作成し、上記の2ファイルをアップロードしてください。
    例えばWordPressなら「wp-content」フォルダがある場所と同じ場所に作る場合が多いと思います。
  4. 「header.php」でスクリプトを読み込みます。
    (時代的にはbodyタグの最後で読み込んだほうが良いのかもしれませんが、余計なトラブルは避けたいため一旦確実な方法で)
    例の如く「</head>」の前に記載します。

    <head>
<!-- 中略 -->
<link href="/code-prettify/prettify.css" type="text/css" rel="stylesheet"> <!-- デフォルトのスタイルシート読み込み -->
<script type="text/javascript" src="/code-prettify/prettify.js"></script> <!-- スクリプトファイル読み込み -->
</head>
  5. 「header.php」で上記で定義したスクリプトからソースコードの表示関数を実行します。
    「ソースコードの表示スタイルを変更する」という関数を定義しておくイメージです。
    珍しく「<body>」タグに記載します。「<body>」タグ自身を以下のようにしてください。

    <body onload="prettyPrint()" <!-- 他の処理がある場合はそのまま残しておく --> >

以上で準備は完了です。

使い方

前回(Webサイトにソースコードを載せる方法(1))紹介した、「pre要素 + code要素」を使う方法から、pre要素の記述に少し加えるだけです。
ソースコードを表示したい部分を以下のようにしましょう。

<pre class="prettyprint linenums"><code>
<!-- ここにソースコードを記載 -->
</code></pre>

これでgoogle-code-prettifyのスタイルでソースコードを表示できます。
「class="prettyprint linenums"」は「prettyprint」スタイルで表示し、「行番号を表示する」という意味です。必ずpre要素に記載してください。code要素に記載すると違う動作をするようです。(使い方があるのかもしれませんが、私のところでは文字の色がうまく表示されませんでした。)

最後にブラウザのキャッシュを削除して動作を確認しましょう。

結果

ソースコードが綺麗に表示できる。
基本的な使い方はこれで十分ですが、準備手順の2番でも書いた通り、この状態では様々なプログラミング言語の予約後には対応していないです。
その他にも便利なカスタマイズなどもあるため、自身が慣れたら記事を書こうかと考えています。

キーのひとこと：
WordPressって奥が深いですね。
今までWeb系の技術に触れてこなかったので、JavaScriptやcss、レイアウトに関する知識などを一から学ぶ良い機会になっています。
Web系の技術は時代にもあっているので時代に追いつけるように勉強していきたいですね。