2018年11月28日水曜日

VSCodeでMarkdown

VSCodeでMarkdown

Markdown環境にBoostnoteを使おうを思ったけど、VSCodeにしたという話。

はじめに

MarkdownとUMLに触れる機会が出てきたので、何か良い環境が無いかと探していたら、Boostnoteというものを見つけた。

やりたいことは、

1.各種メモとプログラムコードをシンタックスハイライトで見やすく残したい

2.UMLやシーケンス図の作成

3.Markdown→HTMLにして、Blog投稿

4.オフライン環境やネット規制がかかっている環境でも使いたい

最初の2つは、そのままできそう。

Blog(Blogspot)はどうやれば良いのか。

いい感じに装飾して欲しいし、画像やgistの引用もしたい。

と、思っていたのだけど、4が曲者で、BoostnoteのUML(Plantuml)が外部(platumlサーバー)に通信しているため、オフライン環境では使えない??

uml diagram

というような表示になってしまう。

そこで、オフラインでなんとかしようと方法を探してみた。

PlantUMLのローカルインストール

このあたりに

The servlet for server side

GitHub - plantuml/plantuml-server: PlantUML Online Server

方法としては、

1.docker

2.maven

というのがあるみたい。

お出かけ用のネットブックで使うこともあるので、dockerは難しいと思う。


git clone https://github.com/plantuml/plantuml-server.git

apt-get install maven

apt-get install libjetty9-java

cd planyuml-server

mvn jetty:run -Djetty.port=9999

で何やらインストールが始まった。

でさっきの「http://www.plantuml.com/plantuml 」を

http://localhost:9999 」に変えてみる。


ソース・オプション5は現在サポートされていません。

6以降を使用してください。

Orz…挫折。

Boostnoteの使用感が良かったので、ちょっと悲しいけど、

あまり時間をかけたくなかったので、VSCodeに変更。。。

VSCodeでMarkdown環境を構築

VSCodeにしたら情報がたくさんある。

「2」に関しては、PlantUMLで無く、Mermaidを使うことにした。

ゴリゴリにUMLしたいわけでは無いので…。

Mermaidって、昔使ったことがあるような。結局同じようなことしかやっていないね。

http://continue-to-challenge.blogspot.com/2015/10/markdownmermaidjs.html

エクステンション

1.Markdown Preview Enhanced

2.Prettier - Code formatter

3.markdownlint

もう以下の記事のまんま

https://qiita.com/kumapo0313/items/a59df3d74a7eaaaf3137

mermaidに関しての変更

大した変更じゃないけど、見やすくするために


Mermaid  theme, you  can  choose  one  from ["mermaid.css", "mermaid.dark.css", "mermaid.forest.css"]

MarkdownPreviewEnhancedのCSSカスタマイズ

コードブロック

ctrl+,で設定開いて、変更する。


Markdown-preview-enhanced: Code Block Theme

Code block theme. If `auto.css` is chosen, then the code block theme that best matches the current preview theme will be picked.

>monokai.css

本体

以下の説明の通り、ctrl+shift+pでコマンド入力開いて、

https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css


Markdown Preview Enhanced: Customize Css

を入力して、開いたstyle.lessにカスタマイズしたいcssを入力する。


/* Please visit the URL below for more information: */

/* https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

  

.markdown-preview.markdown-preview {

// modify your style here

// eg: background-color: blue;

  

h1 {

color: #ff4f00;/*文字色*/

position: relative;

line-height: 1.4;

padding:0.25em 0.5em;

display: inline-block;

top:0;

}

  

h1:before,h1:after{

position: absolute;

top: 0;

content:'';

width: 8px;

height: 100%;

display: inline-block;

}

  

h1:before{

// border-top: dotted 1px #404040;

border-left: dotted 1px #404040;

// border-bottom: dotted 1px #404040;

left: 0;

}

  

h1:after{

content: '';

// border-top: dotted 1px #404040;

border-right: dotted 1px #404040;

// border-bottom: dotted 1px #404040;

right: 0;

}

  

h2 {

padding: 0.2em;/*文字周りの余白*/

color: #404040;/*文字色*/

background: #fffaf4;/*背景色*/

border-left: solid 10px #ff4f00;/*左線(実線 太さ 色)*/

border-bottom: dashed 1px #ff4f00;

}

  

h3{

color: #ff4f00;/*文字色*/

border-bottom: dashed 1px #ff0600;

}

  

h4 {

border-bottom: solid 2px #cce4ff;

position: relative;

}

  

h4:after {

position: absolute;

content: " ";

display: block;

border-bottom: solid 2px #5472cd;

bottom: -2px;

width: 10%;

}

}

メモ

シーケンス


title: Authentication Sequence

A->B: text

A->B: text

B->B: tesue

A->B: text

mermaid

クライアントサーバーデータベースデータ取得要求select発行select結果データ取得要求結果取得データ表示エラー表示alt[ 正常終了 ][ エラー ]クライアントサーバーデータベース

記載例は、以下URLのパクリです。

https://qiita.com/poro1985/items/b23bad93bf721a195f15

こんな感じ。

しばらくは、これでやってみようと思う。

Bloggerへの投稿

最初、いろいろな人がやっていることを真似してmarked.jsを考えたのだけど、表示するときにtextareaが見えてしまうのと、スマホ表示時にうまく表示されなかった(こっちはテーマを修正すれば良いような気がするけど・・)

なので、Blogger投稿時は、オンライン環境だと割り切って、オンラインサービスを使うことにした。

StackEdit

ネット上に情報が溢れているため、特に書くことはない。

以下がとても参考になった。

https://qiita.com/yonori/items/fe733aee419019fbacc4