Markdown Viewer：ChromeでMarkdownの表示

Chromeで、MarkdownファイルをHTMLに変換してプレビューできるプラグインとして

があります。

このプログでは、Markdown Viewerのインストール方法、使い方を説明します。

Markdown Viewer の概要

Markdown Viewerは、Markdown形式のテキストをブラウザ上でプレビューできる拡張機能（プラグイン）です。

Markdownとは、HTMLやCSSなどのマークアップ言語を知らなくても、簡単な記号や文字列の組み合わせで文章構造を記述できるテキスト記法です。ブログ記事や技術ドキュメント、Webサイトのコンテンツなど、さまざまな用途で利用されています。

Markdown Viewerを使えば、Markdown形式のテキストをブラウザ上でそのまま表示できます。そのため、Markdownの記法に慣れていない場合でも、Markdownで記述したテキストの見た目を確認しながら編集することができます。

Markdown Viewerの主な機能は以下のとおりです。

Markdown Viewerは、Chrome、Edge、Firefoxなどの主要なブラウザで利用できます。

以下に、Markdown Viewerの使い方を簡単に説明します。

Markdown Viewerは、Markdownの記法に慣れるためのツールとして、またMarkdownで記述したテキストの見た目を確認するためのツールとして、役立ちます。

以下に詳細に説明します。

Markdown Viewer の「Chromeに追加」ボタンをクリックしてインストールします。

以下の手順で、Markdown Viewerの設定画面を表示します。

すると、設定画面が表示されます。

※ Chromeの右上に「拡張機能アイコン」が表示されていれば、それをクリックしてから「拡張機能を管理」を選択すると、「拡張機能」の一覧が表示されます。

設定画面では、以下の項目を設定します。

Chromeに、 Markdown Viewerのアイコンが追加されます。このアイコンをクリックすると、設定画面が表示されます。

Markdown Viewer / Browser Extension に、設定内容の詳細な説明があります。

「THEME」、「COMPILER」、「CONTENT」の3つのタブがあります。

テーマの設定を行います。

設定	設定内容
auto	automatically adjust the content width based on the screen size
full	100% screen width
wide	fixed at 1400px
large	fixed at 1200px
medium	fixed at 992px
small	fixed at 768px
tiny	fixed at 576px

※ テーマautoのオプションは、固定幅で、周囲の境界線はgithub.com でホストされているリポジトリのレンダリングされたファイルと同じです。

・COMPILER

コンパイラのオプションを設定します。

Option	Default	Description
abbr	`false`	Abbreviation using `*[word]: Text` `<abbr>`
attr	`false`	Custom attributes using `{}` curly brackets
breaks	`false`	Convert new lines `\n` in paragraphs into line breaks `<br>`
cjk	`false`	Suppress linebreaks between east asian characters
deflist	`false`	Definition list `<dl>`
footnote	`false`	Footnotes `[^1]` `[^1]: a`
html	`true`	Enable HTML tags in source
ins	`false`	Inserted text `++a++` `<ins>`
linkify	`true`	Autoconvert URL-like text to links
mark	`false`	Marked text `==a==` `<mark>`
sub	`false`	Subscript `~a~` `<sub>`
sup	`false`	Superscript `^a^` `<sup>`
tasklists	`false`	Task lists `- [x]`
typographer	`false`	Enable some language-neutral replacement + quotes beautification
xhtmlOut	`false`	Use `/` to close single tags (`<br />`)

Full CommonMark support including GFM tables and strikethrough +

コンテンツのオプションを設定します。

Option	Default	Description
autoreload	`false`	Auto reload on file change
emoji	`false`	Convert emoji `:shortnames:` into EmojiOne images
mathjax	`false`	Render MathJax formulas
mermaid	`false`	Render Mermaid diagrams
syntax	`true`	Syntax highlighted fenced code blocks
toc	`false`	Generate Table of Contents