元画像へのリンク付き縮小画像の表示

まず、画像を指定幅に縮小して表示する部分は、属性リストをマークアップに設定できるPython MarkdownのAttribute Lists拡張を利用します。

![width 300 image](/images/201801/20180102_140000.jpg){ width=300 }

拡張を利用するには、pelicanconf.pyに以下のように記述します。

MARKDOWN = {
    'extension_configs': {
        ...
        'markdown.extensions.attr_list' : {},
        ...
    },
    'output_format': 'html5',
}

次に、画像へのリンクの設定は、マークアップを入れ子にして行います。

[![width 300 image](/images/201801/20180102_140000.jpg){ width=300 }](/images/201801/20180102_140000.jpg)

リンク先を新しいウィンドウ・タブで表示するためには、さらに属性を追加します。

[![width 300 image](/images/201801/20180102_140000.jpg){ width=300 }](/images/201801/20180102_140000.jpg){ target="_blank" }

width 300 image { width=300 }{ target="_blank" }

ツイートや動画などの埋め込み

これは、PyEmbedを利用します。

埋め込みたいURLに対して、以下のように記述します。

[!embed](https://youtube.com/watch?v=4xoyg7Awvfk)

[!embed](https://twitter.com/kumar0001/status/946701579251466240)

!embed

このタグが埋め込まれたMakdownファイルを処理するときに、記述したURLにアクセスできないとエラーメッセージが表示されます。

ERROR: Could not process devdiary/BlogCMS/20180102-pelican-markdown-for-embedding-and-image-link.md
  | PyEmbedError: HTTPConnectionPool(host='url', port=80): Max retries exceeded with url: / (Caused by NewConnectionError('<urllib3.connection.HTTPConnection object at 0x7f68aef4d240>: Failed to establish a new connection: [Errno -2] Name or service not known',))

Pelicanのマークダウン記法～リンク付き縮小画像、ツイート・動画などの埋め込み

元画像へのリンク付き縮小画像の表示

ツイートや動画などの埋め込み

CATALOG