Markdown を拡張する MDX はドキュメント作成の新たな可能性？
この記事は、技術書典 11 で頒布中の「Vivliostyle で本を作ろう vol. 5」から抜粋した記事です。ご興味ありましたら、Vivliostyle を使って組版された本誌もぜひお買い求めください！ また、この記事以外の内容もすべて Vivliostyle 公式サイトで無料公開中です。 技術書やドキュメントを執筆する際、あなたはどのような形式で文章を書きますか？ 最近ではもっぱら Markdown で書かれることが多いですが、この Markdown を拡張するポテンシャルを持つお気に入りの OSS プロジェクト「MDX」を紹介します。 MDX = Markdown + JSX MDX の名前の由来は Markdown + JSX なので、MDX を理解するためにはまず JSX について知る必要があります。 JSX とは JavaScript の拡張構文の一つで、元々 React の
Build optimized websites quickly, focus on your content | Docusaurus
Build optimized websites quickly, focus on your content Powered by MDXSave time and focus on text documents. Simply write docs and blog posts with MDX, and Docusaurus builds them into static HTML files ready to be served. You can even embed React components in your Markdown thanks to MDX. Built Using ReactExtend and customize your project's layout by writing React components. Leverage the pluggabl
GitHub - joerdav/xc: Markdown defined task runner.
xc is a task runner similar to Make or npm run, that aims to be more discoverable and approachable. The problem xc is intended to solve is scripts maintained separately from their documentation. Often a Makefile or a package.json will contain some useful scripts for developing on a project, then the README.md will surface and describe these scripts. In such a case, since the documentation is separ
Zettlr | A Markdown Editor for the 21st Century
Your one-stop publication workbench From idea to publication in one app: Zettlr accompanies you while writing your blog post, newspaper article, term paper, thesis, or entire book. All download options Available for Windows, macOS, and Linux. Zettlr is Free and Open Source software. Privacy First Zettlr is Privacy First: There is no forced cloud-synchronization and all files stay on your computer.
Markdownでシーケンス図とかが書けるMermaid記法で業務フローを書いたら意外とイケたので自分なりのコツを紹介してみる | DevelopersIO
こんにちは、臼田です。 みなさん、業務設計してますか？(挨拶 今回はMarkdownでシーケンス図やフローチャートなどの図を記述できるMermaidを使って業務フローを書いてみたら、意外と書けたので自分なりのTipsを紹介したいと思います。 その前に 注意点として、まだMermaidを使い始めたばかりなので、「もっとこうしたらいいぞ」とか「こっちのほうがいいぞ」とかあれば建設的なフィードバックとしてSNSとかでいただけるとありがたいです。 あと業務フローって表現しましたが、人によって思い描く業務フローが違うと思うので、業務フローの定義に関するツッコミはご容赦ください。私が今回Mermaidで書いたのは以下の図です。(内容はブログ用に簡素化しました) この図のコードは以下のとおりです。(後ほど解説します) sequenceDiagram autonumber actor お客様 partic
GitHub+VSCodeでのMarkdownドキュメンテーションのプロジェクトルールを考える
概要 Word や Excel でのドキュメント作成を回避し、なるべく生産性高く、かつ、OS 環境依存なく、すべて基本無料で構成できるツールで、Markdown ベースで設計書を作成することを考えてみます。 GitHub 上で閲覧できる形でドキュメントを作成することを前提に、VSCode（＋プラグイン）を用いて、テキスト文書、表（テーブル）、図（構成図など）、キャプチャ、などをスピーディに作成し、PullRequest ベースで運用していけるように、プラグインを構成および、レギュレーションを作成してみました。 GitHub の README.md や Wiki に書いて使えるかと思いますので、併せて markdown 形式および、vscode のプラグイン推奨設定ファイル形式でも載せておきます。 もし、もっとこのプラグインを使うと良い、などアイデアなどありましたら教えていただけると幸いです
GitHubで使えるようになった Mermaid の便利なところ
はじめに GitHub で Mermaid がサポートされました。 Mermaid は図やグラフを描画するの独自の記法を持ちます。 その記法を Markdown のコードブロック中に記述するだけで図を描画できるのが便利です。 ...便利なのですが、記法が独特なことや機能が豊富なことから、とっつきにくいところもあります。 弊社[1]では みんチャレ 開発の情報共有ツールとして esa.io を活用しており、 esa も Mermaid をサポートしており以前から活用していました。 この記事では、私がこれまでに活用してきた中から特に便利だと感じた機能を紹介します。 ちなみに Zenn も Mermaid をサポートしているため図を描画できます。 Gantt ガントチャートです。 私が Mermaid を使いたいと思ったきっかけの機能です。 まずは、一番シンプルな例を書きます。 gantt Co
最近はノートアプリに Obsidian を使っています｜tokuhirom
みなさんこんにちは。徳永広夢です。 日々を過ごしていると、自分の作業や思いついたことをメモにとることが多いかと思います。紙のメモをとってもいいのですが、かさばりますし、検索性も悪いので、やはりデジタルメモをとっておきたいところです(僕は紙のメモも併用していますが)。 コンピューターでノートを取るにあたっては、学生の頃は ChangeLog メモを利用していましたし、その後は howm、Evernote、Notion、Scrapbox、Joplin、Bear、Inkdrop、紙copi、plan text、org-mode など色々なツールを試してきました。 そして最近は Obsidian を利用しています。Obsidian はわりと新興のノートテイキングアプリです。Obsidian の以下の点に僕は魅力を感じています 使いやすい Markdown editor CodeMirror ベース
2021年前半ノートアプリ比較22選+α｜nooyosh
こんにちは、nooyoshです。前半と言いつつ5月に投稿します。最近ノートアプリ（情報整理アプリ）をいろいろ試したので、少しまとめてみました。 ◆長すぎて読めないんだが？（TL; DR） おすすめは、Obsidian、Logseq、Zettlr、Notion、Scrapbox、(Macユーザなら）Bearです。Bear以外は無料で使用できます。 また、機能を一覧で見たいという方のために、比較表を用意しました（ https://nooyosh.net/misc/memo-app-2021-1H.html ） 比較の際、考慮したポイントは以下の通りです。 - データがどこに保存されるか？ - モバイルアプリがあるか？端末間で同期されるか？ - 画像貼り付けが簡単にできるか？ PDFはどうか？ zipファイルは？ - アプリにドラッグ＆ドロップするとどうなる？ - テキスト中タグ（ #like_
[Obsidian] コミュニティプラグイン全集 改訂版
Obsidianには標準で用意されたコアプラグインとコミュニティプラグイン（いわゆるサードパーティプラグイン）が存在します。 その中でもコミュニティプラグインは多数存在し、また今後もその数は増え続けるでしょう。 それ自体は非常に楽しく、またそうあるべきですが、一方で必然的にいくつかの問題も引き起こします。 プラグインの数があまりに多く、ダウンロード数という指標だけでは探しにくい何のためのプラグインなのか、またどう使うのかが分かりにくいそこでこのページでは「特性による分類」と「ワンポイントアドバイス」によって、あなたが今最も必要とするプラグインに出会い、そして使い始める手助けをしたいと考えています。 「特性による分類」とは何か？ 難しく考える必要は全くありません。たとえば「HUNTER×HUNTER」の念能力になぞらえるなら、プラグインはこんなふうに分類できるでしょう。 (Output 0.
![[Obsidian] コミュニティプラグイン全集 改訂版](https://cdn-ak-scissors.b.st-hatena.com/image/square/2e0b607098d94f04993916f5baf2a253ce0196cd/height=288;version=1;width=512/https%3A%2F%2Fpouhon.net%2Fwp-content%2Fuploads%2F2022%2F08%2FObsidian_6new001.jpg)
Slidevを導入してMarkdownで美しいスライドを書こう - Qiita
(PR) 本記事でご紹介している Slidev などのテクニックについて、2021/11/20(土) 開催の VS Code Conference Japan 2021 にてご紹介しました。YouTubeアーカイブや発表資料も是非ご参照ください。 Slidevとは Slidevはエンジニア向けプレゼンテーションツールです。 Markdownで記述した文書から美しいスライドを生成できます。 公式デモ とそのソースとなるMarkdown もご参照ください。 ドキュメントは以下にあります。 すぐに使えるサンプル 使用頻度の高いと思われる記法を含めたサンプルのMarkdownを以下に公開しています。 コピペするなどしてお使いください。詳細は後述します。 上記Markdownを使用しているスライドを以下にデプロイしています。 上記Markdownの記述内容と見比べていただけると分かりやすいかと思いま
簡単操作で自分専用Wikiを構築できるMarkdownエディタ「Obsidian」のモバイル版を使ってみた
基本無料のMarkdownエディタ「Obsidian」では、Markdown形式で見やすいノートを記述し、ノート同士にリンクを張ることで自分専用のWikiを構築することができます。そんなObsidianのモバイル版が2021年7月12日に登場したので、実際に使って機能を確かめてみました。 Mobile apps - Obsidian https://obsidian.md/mobile Obsidian - Connected Notes on the App Store https://apps.apple.com/us/app/obsidian-connected-notes/id1557175442 Obsidian - Google Play のアプリ https://play.google.com/store/apps/details?id=md.obsidian Obsidia
自己流の手順書フォーマットを公開してみた | DevelopersIO
手順書フォーマットは千差万別 みなさんは自己流または、組織やプロジェクトで定められた手順書のフォーマットはありますか? 私は自己流の手順書フォーマットがあります。 自己流の手順書フォーマットがあるといっても、かなり扱いがふわふわしているので、備忘やメモの意味合い強めでまとめていきます。 「もっとこうした方がいいよ!!」などフィードバックがあれば、ぜひお願いします! いきなりまとめ 手順書はExcelやスプレッドシートではなく、Markdownで書く 手順書はgitで管理する 5W1Hを意識して手順書を書く 基本的にはCLIを使った手順書にする 手順書はExcelやスプレッドシートではなく、Markdownで書く 手順書をExcelやスプレッドシートで書くメリット・デメリット 手順書をExcelやスプレッドシートで書いている方も多いと思いますが、私はMarkdownで書いています。 Exce
フロントエンド初心者がGatsbyでブログを作り直した話 - As a Futurist...
フロントエンド初心者が無事に Hugo のブログを Gatsby で一から作り直すことができた。その振り返り。 歴史 インターネットを小中学生(もはや 25 年以上前)に触り初めた頃に、HTML で文章の構造を作り CSS でデザインする、ということができるのを知って感動したけど、結局自分には何かが合わなくてそれを突き詰めることができなかった。というか、それを知ったが故にテーブルレイアウトとかがどうしても気に入らず、かといって CSS は float が難しすぎて、結局ウェブサイトを作る、という根本的な営みをずっと避けてきてしまった。 時は過ぎ、Wordpress の様なブログエンジンや Hugo の様な仕組みがあったおかげでブログを初めて続けることはできた。13 年前にレンタルサーバに Wordpress を置いて始めたこのブログも 9 年前には VPS での Wordpress 運用に
Markdown で技術書が書ける｜abechanta
ソフトウェアに関する記事やコラムを書くなら、Markdown 記法はとても良い選択です。見た目の統一感があり、覚えやすく、軽量です。 この「Markdown での書きやすさ」を物理書籍や電子書籍の執筆にも応用できたらな、、、 "W3C Paged Media Viewer" はそれを実現する、OSS の Visual Studio Code のエクステンションです。エクステンションを入れただけの超シンプルな環境を使って、手間いらずでサクッと技術書を執筆することができます。 以下に示すとおり導入は簡単です。 1. VS Code を起動します 2. CTRL + SHIFT + X とタイプして Extensions ビューを表⽰します 3. 検索ボックスに paged media と⼊⼒し、 W3C Paged Media Viewer あるいは abechanta.vscode-ext-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Notes
Home - Dynalist
Obsidian - Sharpen your thinking
Slidev
markmap