【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスライドを作る - Qiita
【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスライドを作るMarkdownVisualStudioCodeDraw.ioMarpvega TL;DR Visual Studio Code上で、Markdownから、こんな感じのデッキを生成できるようにします。 使用したファイル類は、GitHub tomo-makes/marp-styles にまとめました。 きっかけ 叩き台となる資料がなく、急ぎプレゼンをする機会があり、Marpで作成した 内輪では使っていたが、多くの目に触れるのは初めてで、もう少しデザインを調整したいと思った 今後も使いまわせるものを、スニペット、およびサンプルテーマ化しておこうと思い立った ついでにいろいろな図表の生成とデッキへの入れ方、必要そうな配色、素材のリンクをまとめておきたい Marpとは Marp: Markdown
markedで安全にMarkdownからHTMLを生成するsafe-marked
MarkdownをHTMLにコンパイルするmarkedは0.7.0でsanitizeオプションを非推奨にしています。 これはサニタイズの処理をmarkedから外す目的です。 Sanitize and sanitizer · Issue #1232 · markedjs/marked このsanitizeオプションの代わりにDOMPurifyを利用することを推奨していますが、 DOMPurifyはブラウザとNode.js両方で使うには癖があるためちょっとややこしいです。 なぜならDOMPurifyはDOM APIに依存しているため、 Node.jsで動かす場合はjsdom使うためです。 単純にjsdomを使ってしまうとブラウザでもjsdomが含まれてしまい、ファイルサイズが巨大になってしまいます。 そのため、ブラウザ向けの場合では直接DOMPurifyを使い、 Node.jsの場合はDOMP
mdbuf v1.0.0: 最高の Mardkown Preview を目指して - mizchi's blog
mdbuf, そこそこ使い物になりそうな品質になったので改めて紹介します。 https://markdown-buffer.netlify.com で遊べます。 コンセプト ブラウザで完結 編集とプレビューのみに注力 PWA 機能を最大限に活かす 特長: 高速な Markdown プレビュー 色々頑張ってみた結果、高速な入力が可能です。 試した限り、 100000 文字以上だと流石に重くなっていきます。将来的に領域を分割してレンダリングできないか実験中です。 Desktop PWA 対応 PWA アプリとして、オフラインで起動することが可能です。編集中のデータはブラウザ内に保存されます。 編集位置への自動スクロール Markdown を編集すると、プレビュー側の対応する行へ自動的にフォーカスします。 自分が知る限りこの機能を実現してるのは mdbuf だけです。 アウトライン機能 指定した
大量のテキストを食っても速い Markdown Editor 作った - mizchi's blog
もう人生で何個目かわからない markdown エディタ作った。が、今回のは結構気に入っている。 https://markdown-buffer.netlify.com/ で遊べる。 用途としては、GitHub か Qiita か はてなブログかわからないが、なにか書こうと思ったときに、どのサービスも中途半端に重いので、とりあえずのバッファが必要、という感じで作った。なので速度重視。 ブラウザのストレージで永続化してる。オフラインで動く。できるだけエディタとしてはスコープを大きくせず、単に編集バッファ(textarea)でしかない、というのを意識している。 結構頑張って作り込んでしまった https://nedi.app が色々肥大化してしまっていて入力時にラグを感じるので、編集体験を見つめ直す自戒もある。 機能 数式対応 コードハイライト対応 バックグラウンドで自動保存 改行を br に
全部クライアントサイド JavaScript で実装されててメモは Google Drive に保存される Markdown メモツール作った。 - Diary
全部クライアントサイド JavaScript で実装されててメモは Google Drive に保存される Markdown メモツール作った。 https://memopad.ssig33.com/ 以前から自分専用に使ってたメモツールがあったのだが、これにつかってた MySQL が落ちて、その MySQL の復帰のしかたはメモツールにしか書いてなかったみたいな頓知みたいな事態が起きてキレて作った。 バックエンドを自前のサーバーからクライアントサイド向けの Google の API Library に置き換えるだけなのでわりとシュッと出来てよかった。 React のおかげで本当にこういうのはめちゃくちゃ簡単になった。 HTML と JS は S3+Cloudfront でデプロイしている。これでやってる。 サイトの説明にも書いてるけど、あらゆる機能がクライアントで動くように実装されている
mermaid.jsが素晴らしいけどなかなか使ってる人見かけないので実例晒す(追記あり) - Qiita
mermaid.jsとは JavaScriptのチャート作成ライブラリです。他にも似たようなのは色々ありますが、これ一本でフローチャート、シーケンス、ガントに対応してるので、個人的にお気に入り。 http://knsv.github.io/mermaid/ サイトの各チャートのページ見ると書き方と何ができるかはわかるので、ご覧あれ。 僕の使い方 JSのライブラリを自分でインポートして何かすることはほとんど無くて(後述の理由からガントだけJSで使ってるけど)、基本的には以下の2つの方法で使ってる。 Haroopad フリーでクロスプラットフォーム(OS X, Win, Linux)なMarkdownエディタ。 v0.13からmermaid.jsがインテグされているので、何もしなくてもそのまま使える。 mermaid.jsのグラフの書き方は、コード表記で、言語をmermaidにしてあげるだけ。
高速でドキュメントを書くためにMarkdown記法を使う on GoogleDrive - YTsudaのブログ
Markdownとは エンジニアたちがドキュメントを高速で書くために編み出された記法です。 Markdown記法を使うと「見出し」や「リスト」のようなドキュメントの要素を簡単に記述できるようになります。 例えばMarkdownで以下のように記述すると... ## 小見出し ### もう一つ小さい小見出し - リスト - リスト > 引用文引用文引用文引用文引用文引用文 以下のように出力されます 小見出し もう一つ小さい小見出し リスト リスト 引用文引用文引用文引用文引用文引用文 さて、今回はこのMarkdown記法をGoogleDriveで使う方法をご紹介します。 StackEditをGoogleDriveにインストール StackEditというブラウザ上でMarkdownが書けるWebアプリがあります。 これがGoogleDriveのプラグインとしても提供されているので、インストールし
Notepad++のMarkdownプレビュー設定 | 俺にはまだ二次元がある。
Notepad++のMarkdownプレビュー設定 Notepad++でMarkdownプレビューするための設定。Pandocを使ってmdファイルをhtmlに変換してPreviewHTMLプラグインに出力する。 Notepad++ で Markdown プレビューのプラグインはないので PreviewHTML プラグインを利用して、 Markdown プレビューをできるようにする設定方法です。 Notepad++ にある PreviewHTML プラグインは、 HTML を編集中にプレビューできるプラグインだけど、 編集ファイルを表示させるのに外部ソフトをフィルターとして使えるので Pandoc をフィルターに設定することで Markdown ファイルをプレビューできる。 外部ソフトは Markdown を変換できればなんでもいいんで、 pythonを利用した方法を参考にさせてもらった。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Pandoc: markdown を github 風 html に変換する | DriftwoodJP