続けるブログ: markdown

ラベル markdown の投稿を表示しています。すべての投稿を表示

2024年2月14日水曜日

VSCodeServer(code-server)

VSCodeをエディタとして使うことが多くなった。
MarkdownやMindmapや解像度を上げる作業に便利。

PCならVSCodeをインストールすればよいのだけれど、持っているChomebookではlinuxの仮想環境の上に動かすため、どうしてももっさりしてしまう。

以下のようなサービスもあるけど、経験として自宅サーバーで構築したかった。
https://vscode.dev/

code-server

これを自宅サーバーで動かして、SSHトンネリングでアクセスする

公式
https://github.com/coder/code-server
インストール方法
https://coder.com/docs/code-server/latest/install#debian-ubuntu

参考
https://qiita.com/plumchang/items/2229bda056d0f1ef3434
https://zenn.dev/kato_k/articles/6301d35b3d8d3c

インストール

curl -fsSL https://code-server.dev/install.sh | sh

設定ファイル

$ cat ~/.config/code-server/config.yaml
bind-addr: 127.0.0.1:8282
auth: none
cert: false

nextcloudで自動同期

code-serverではリモート先のファイルを編集するため、ローカルや他のPCとの同期が難しい。
そこで、nextcloudで同期させようと思った。

クライアントソフト

GUIは以下で、自動同期される
https://nextcloud.stylez.co.jp/nextcloud-desktop-client

CLIは以下で、自動同期されない
https://docs.nextcloud.com/desktop/3.11/advancedusage.html#nextcloud-command-line-client

参考
https://ritaiz.com/articles/steps-to-install-nextcloud-cli-client-on-ubuntu

CLI

nextcloudcmd -u username -p password --path /Documents/path $HOME/ドキュメント/ https://****.mydns.jp:port/

systemdを使った自動同期

linuxでcronの変わりにsysemd timerでスクリプトを実行したい。

Serviceファイルの作成

systemdが実行するサービスファイルを作成する。
このファイルは、どのスクリプトを、どのユーザーとして実行するかを指定する。

$ cat /etc/systemd/system/adeno-sync-nextcloud.service 
[Unit]
Description=Sync nextcloud script

[Service]
Type=simple
User=adeno
ExecStart=/home/adeno/ドキュメント/nextcloud_sync.sh

[Install]
WantedBy=multi-user.target

Timerファイルの作成

次に、いつサービスを実行するかを指定するtimerファイルを作成する
1分毎に同期を実施する

$ cat /etc/systemd/system/adeno-sync-nextcloud.timer 
[Unit]
Description=Runs my custom script

[Timer]
OnCalendar=*:*:00

Persistent=true
Unit=adeno-sync-nextcloud.service

systemdのリロード

systemdが新しいファイルを認識するように、systemdの設定をリロードする。

sudo systemctl daemon-reload

Timerの有効化と起動

有効化し、起動する

sudo systemctl enable adeno-sync-nextcloud.timer 
sudo systemctl start adeno-sync-nextcloud.timer

nextcloudのmarkdownビューアー

Markdown Editor
Notes

2018年11月28日水曜日

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のローカルインストール

このあたりに

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

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

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

こんな感じ。

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

Bloggerへの投稿

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

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

StackEdit

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

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

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

2015年10月25日日曜日

簡易Markdownエディタにmermaid.jsを導入してフローチャートを表示する

しばらくバタバタしており、更新が滞ってしまった。
でも続けることはやめてはいない。

最近、Markdownが気になる。流行に乗り遅れてしまった感があるけど、
このページを見て心踊ったからだ。
http://qiita.com/uzuki_aoba/items/a01f8b0b52ced69c8092

ここで紹介されている「Haroopad」は良さそうなのだけど、
こればかりに頼ってしまうのもなんだかなので、
勉強を兼ねてwebベースの簡易エディタを作ってみたいと思う。

概要

webベース
リアルタイム更新
Markdown表記
コードのハイライト表示
mermaid.js対応

準備

ディレクトリ作成

今回はmdeとした。

インストール

１．jQuery
　　　これだけ[npm install jquery]
２．Markdownパーサー(marked)
　　　これだけ [npm install marked]
３．ハイライト(highlight.js)
　　　これだけ[npm install highlightjs]
４．Mermaid.js
　　　これだけ[npm install mermaid --save-dev]