VSCodeでMarkdown
Markdown環境にBoostnoteを使おうを思ったけど、VSCodeにしたという話。
はじめに
MarkdownとUMLに触れる機会が出てきたので、何か良い環境が無いかと探していたら、Boostnoteというものを見つけた。
やりたいことは、
1.各種メモとプログラムコードをシンタックスハイライトで見やすく残したい
2.UMLやシーケンス図の作成
3.Markdown→HTMLにして、Blog投稿
4.オフライン環境やネット規制がかかっている環境でも使いたい
最初の２つは、そのままできそう。
Blog(Blogspot)はどうやれば良いのか。
いい感じに装飾して欲しいし、画像やgistの引用もしたい。
と、思っていたのだけど、4が曲者で、BoostnoteのUML（Plantuml）が外部(platumlサーバー)に通信しているため、オフライン環境では使えない？？
uml diagram
というような表示になってしまう。
そこで、オフラインでなんとかしようと方法を探してみた。
PlantUMLのローカルインストール
このあたりに
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
記載例は、以下URLのパクリです。
https://qiita.com/poro1985/items/b23bad93bf721a195f15
こんな感じ。
しばらくは、これでやってみようと思う。
Bloggerへの投稿
最初、いろいろな人がやっていることを真似してmarked.jsを考えたのだけど、表示するときにtextareaが見えてしまうのと、スマホ表示時にうまく表示されなかった（こっちはテーマを修正すれば良いような気がするけど・・）
なので、Blogger投稿時は、オンライン環境だと割り切って、オンラインサービスを使うことにした。
StackEdit
ネット上に情報が溢れているため、特に書くことはない。
以下がとても参考になった。
0 件のコメント:
コメントを投稿