タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
この記事は、技術書典 11 で頒布中の「Vivliostyle で本を作ろう vol. 5」から抜粋した記事です。ご興味ありましたら、Vivliostyle を使って組版された本誌もぜひお買い求めください！ また、この記事以外の内容もすべて Vivliostyle 公式サイトで無料公開中です。 技術書やドキュメントを執筆する際、あなたはどのような形式で文章を書きますか？ 最近ではもっぱら Markdown で書かれることが多いですが、この Markdown を拡張するポテンシャルを持つお気に入りの OSS プロジェクト「MDX」を紹介します。 MDX = Markdown + JSX MDX の名前の由来は Markdown + JSX なので、MDX を理解するためにはまず JSX について知る必要があります。 JSX とは JavaScript の拡張構文の一つで、元々 React の
最近作っている amdx という markdown コンパイラとそのツール郡を紹介します。 GitHub はここ mizchi/amdx このサイト自体も、 amdxg というツールで作られています。 ゴールをどこに設定したか パフォーマンスを突き詰めると、ブログは静的サイトジェネレータで AMP 対応するのが一番と考えた next.js/SSG export + AMP が便利だったので、next.js 上でコンパイルすることを前提に、静的解析を行う webpack loader を作ることにした mdx の parser を借りて、 .mdx をロードすると React Component として振る舞いつつ、他の mdx を import できると、長い文章を書くときにファイル分割できて便利なのでは Markdown プレビュー高速化+ランタイム最小化のために、AST(JSON) 生
Configuring: MDX | Next.js
Markdown and MDX Markdown is a lightweight markup language used to format text. It allows you to write using plain text syntax and convert it to structurally valid HTML. It's commonly used for writing content on websites and blogs. You write... MDX is a superset of markdown that lets you write JSX directly in your markdown files. It is a powerful way to add dynamic interactivity and embed React co
Next.js公式のMDXプラグインで、Markdownでページを作る機能を試してみた | フューチャー技術ブログ
お客様と一緒にNext.jsのドキュメントの輪読会をやっているのですが、その中で初めて知った機能がMDXというマークダウンでページを作成する機能です。 https://nextjs.org/docs/advanced-features/using-mdx 利用規約とか、プライバシーポリシーのページ、ヘルプページの作成とか、Reactコンポーネントも表示できるので、Storybookがわりのコンポーネントカタログを作るのに便利そうという話になったので、ちょっと試してみました。 設定方法上記のページに全部書いてあるのでそちらを見ると良いのですが、軽く手順だけ書いておきます。説明をするため、というよりも「これだけの手間ならやってもいいかな」と興味をもってもらうための説明なので実際に作業をする場合は公式ドキュメントの最新情報を確認してください。 まずは必要なパッケージを追加し、 /** @type
ICSカレッジオブアーツ（日本）と提携関係にあるイギリスのミドルセックス大学、台湾の大葉大学。この3カ国のデザインスクールによる合同卒業制作展をご紹介できることを嬉しく思います。 世界的なパンデミックの影響を受け、ICSでは学校外での物理的な展示会がキャンセルされました。代替で企画されたこのオンライン上での「ひと・モノ・空間の調和」展は、それぞれの学校で育まれた新しいデザインの才能を世界に向けて紹介するのに理想的な場所だと確信しています。自由に立ち寄ってデザイン提案の多様性・深さを体感して、お楽しみ頂ければ幸いです。
GitHub - hashicorp/next-mdx-remote: Load mdx content from anywhere through getStaticProps in next.js
import { serialize } from 'next-mdx-remote/serialize' import { MDXRemote } from 'next-mdx-remote' import Test from '../components/test' const components = { Test } export default function TestPage({ source }) { return ( <div className="wrapper"> <MDXRemote {...source} components={components} /> </div> ) } export async function getStaticProps() { // MDX text - can be from a local file, database, an
2020年4月、Reactでウェブサイトやアプリケーションを作るGatsbyから「Gatsby Recipes」の発表がありました。（執筆時点ではまだExperimentalな機能です） 📝New! "Announcing #GatsbyRecipes" 👩🏿🍳👨🏼🍳 Recipes teach users how to accomplish desired tasks in Gatsby while also automating the process. ➡️ https://t.co/X0ueTQHqv4 ✨ This release is the first step towards adding a lot more automation capabilities to Gatsby. pic.twitter.com/sBH4EVK4Cz — Gatsby (@
Note: This is an old blog post. The below is kept as is for historical purposes. Note: Info on how to migrate is available in our Version 2 migration guide. MDX 2Version 2 of MDX was released after years of hard work, and has many improvements. Here are the highlights: 📝 Improved syntax makes it easier to use markdown in JSX🧑💻 JavaScript expressions turn {2 * Math.PI} into 6.283185307179586🔌
GitHub - mdx-editor/editor: A rich text editor React component for markdown
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Astro 2.0 の新機能、Content Collections API を使って安全に MD / MDX コンテンツを管理する
2.0 のポイント Content Collections: MD と MDX を型安全にするで Hybrid Rendering: SSG にするか SSR にするかをページ毎に選べるようにしたで（Next.js とか SvelteKit にあるやつ） エラーメッセージめっちゃ見やすくしたで HMR 改善したで Vite 4.0 に対応したで 新しいロードマップ公開したで 目玉は Content Collections と Hybrid Rendering 。 今回は Content Collections について書く。 Content Collections API Astro 2.0 は、現代の Web 開発において見落とされがちな問題を取り扱うことを目的としています：Markdown / MDX を扱うことは難しいです。 MD/MDX ってファイル大量になりがちで、管理コスト高い
Gatsby.jsって？ この記事はGatsby.js Advent Calendar 2019 3日目の記事です。 実は1日目も記事を書いてます(Reactの最強フレームワークGatsby.jsの良さを伝えたい！！)。中1日です。高野連に怒られるやつです。カレンダーが空いていたので記事を書きます。 よければGatsbyの良さを叫んだ上の記事も合わせてご覧ください！ 改めてとなりますが、Gatsby.jsはReactで作られた静的サイトジェネレーターです。内部的にGraphQLを用いてデータを取得し、markdownからHTMLを生成、などの処理を簡単に行うことができます。 Gatsbyはとても凄いので、プラグインなどをブチ込むと簡単にPWA対応した超高速サイトが作れたりします。もはや静的サイトジェネレータとしてだけでなく、create-react-appに代わるフレームワークとして使える
Prettier 2.5: TypeScript 4.5 and MDX v2 comment syntax! · Prettier
This release adds support for TypeScript 4.5's new syntax and MDX v2 comment syntax! If you enjoy Prettier and would like to support our work, consider sponsoring us directly via our OpenCollective or by sponsoring the projects we depend on, including typescript-eslint, remark, and Babel. Highlights Avoid extra offset in arrow function body when using long types (#11515 by @kachkaev and @thorn0) S
Next.jsでCMSにMDX形式で登録したコンテンツを利用する ―next-mdx-remoteの使い方― - あなたとあなたの話がしたい
Jamstackな構成では、CMSにどのような形式でコンテンツを登録するかが関心になって来るかと思う。 Markdownを採用する場合は、remark-reactやremark-htmlを使ってMarkdownをHTMLに変換できる。 ただ、実際にはMarkdownだと機能的に足りない部分が出て来そうで、MDXという、MarkdownにJSX（Reactコンポーネント）を埋め込める形式を利用すると捗る。 しかしこのMDX、CMSのような外部コンテンツとして登録する場合はどう使えば良いんだ？と思ったら、Next.jsの場合、next-mdx-remoteという便利なライブラリがあった。 next-mdx-remoteの使い方 例として、Next.jsのImageコンポーネントを利用してみる。 # プロフィール画像 <Image src="/images/profile.jpg" width=
Storybook is the standard tool for UI component development. It’s used to build the most popular design systems on the web, including Shopify Polaris, IBM Carbon, Salesforce Lightning, Auth0 Cosmos, and Airbnb Lunar. Quality documentation like this is crucial to help people re-use your UI components, but it’s also a huge pain to get right. In practice, you spend more time maintaining your document
Next.js + MDXでブログを作った
今までブログは Notion を CMS として使ってたんだけど色々な理由で剥がすことにしました。 主要な理由としては そもそも Notion Blog が全然メンテされてなくて怖い 公式の Notion API がもうすぐ来るので Notion Blog で使う非公式 API が使えなくなりそうで怖い 数週間の単位で Cookie の有効期限が切れて記事が見れなくなる 謎にデプロイがコケまくるのでメンテがめんどくさい 普通に Notion 自体にドキュメント公開機能があるのにブログにする意味があまりない 画像アップしまくってるとすぐ Notion が課金を要求してくる 等が挙げられる。 今現状このブログも Notion Blog ではなく MDX から SSG している。 Notion はどっかのサービスと違ってしっかりとドキュメントをマークダウンでエクスポート出来る機能があるので移行も
Next.js + MDX でブログを書いています - HelloRusk Official Website
Next.js Advent Calendar 2019 9日目の記事です。 今年の2月に Next.js + MDX でブログシステムを構築しました。 あなたが今見ているこのブログは Next.js 製です。 リポジトリは以下の通りです👇 HelloRusk/blog: Tech Blog 日本においては Next.js でブログやポートフォリオを作成している人は GatsbyJS などと比較するとあまり居らず、ましてや Next.js + MDX でブログを書いている人は珍しいという状況かと思います。 私もこのブログを作り始めた頃は、日本語の記事がほぼ皆無という中で、海外の流行の最先端を追うような気持ち（？）で英語のドキュメントやリポジトリを読み漁ったものでした。 ややマイナーな Next.js + MDX ですが、私はとても気に入っています。 Next.js は（他の Now など
3月29日に、Okachi.js vol.24 が開催されました。vol.24 なので、24 回目の開催となります。 Okachi.js は、普通の勉強会と違い、よくわかっている人が発表するという形ではなく、よくわからない部分もあるけれど、とりあえずやってみたことをやってみたところまで発表してみるというスタイルの勉強会です。なので、不特定多数の人が参加するスタイルと相性が悪いので、クローズドなスタイルで行なっています。ただし、参加者は常時受け付け中ですので、お気軽にご連絡ください。 今回は、MDX というフォーマット形式について話しました。 スライドは以下です。 スライドはこちら : MDX and Next.jsMDX について少し解説MDX というのは「JSX embedded in Markdown」というもので、マークダウン形式の文書内に JSX を埋め込めるというフォーマット形式
mdx-deck
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Markdown を拡張する MDX はドキュメント作成の新たな可能性？
MDX eXtended = MDXX | AMP対応 Markdown Compiler と静的サイトジェネレーター
ICS×MDX×DYU JOINT GRADUATION EXHIBITION
サイト構築のタスクを自動化する「Gatsby Recipes」とタスク記述言語としてのMDX - Qiita
MDX 2 | MDX
mdx
Gatsbyの超高速テンプレート(PWA, MDX, TypeScript対応)を作ったヨ！ - Qiita
Rich docs with Storybook MDX
Okachi.js にて、MDX と Next.js について話しました - ARTICLES
handj.jp
megahertz3-75.hatenablog.com
www.google.com
www.nikkei.com
www.google.com
www.youtube.com