この記事は、技術書典 11 で頒布中の「Vivliostyle で本を作ろう vol. 5」から抜粋した記事です。ご興味ありましたら、Vivliostyle を使って組版された本誌もぜひお買い求めください！ また、この記事以外の内容もすべて Vivliostyle 公式サイトで無料公開中です。 技術書やドキュメントを執筆する際、あなたはどのような形式で文章を書きますか？ 最近ではもっぱら Markdown で書かれることが多いですが、この Markdown を拡張するポテンシャルを持つお気に入りの OSS プロジェクト「MDX」を紹介します。 MDX = Markdown + JSX MDX の名前の由来は Markdown + JSX なので、MDX を理解するためにはまず JSX について知る必要があります。 JSX とは JavaScript の拡張構文の一つで、元々 React の
MDX Player for iOS を 5/2 リリースします。 MDXとは、かつての名機X68000の音楽ファイルで、、 とは言ってもX68000なんてもう20年以上前の代物ですから、 分かる人だけでいいです。 先日ふと久しぶりにMDXファイルでも聞こうかなと、HDDを掘って整理をしていたところ、 手元がmacだったせいか、２〜３時間後、気がついたらなぜかiOSで再生していました。 手癖怖いです。 とりあえず鳴るだけのものだったのですが、面白かったのでmoyashi(@hitoriblog)さんにテストアプリをお送りしたところ、リリースするの？、と。 iTunesにリリースするにはとりあえず作ってみたレベルでは審査で落とされるので、最低限ちゃんと動く、審査を通せるだけのファンクション等が必要、各種リソースが必要など、結構な労力が必要になってきます。 大体何でもプロトタイプとして作ってみ
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
X68000シリーズ由来の音楽データMDXをiPhoneで再生！MDX Player for iOSがリリース X68000シリーズにおける事実上の標準音楽データ形式MDX ひとりぶろぐのmoyashi (@hitoriblog) です。 1980年代末〜1990年代にかけ、インターネット前夜まで根強い人気を誇った国産パソコンSHARPのX68000シリーズ。 X68000シリーズは、最後の、そして最も贅沢なホビーパソコン。パソコン通信、草の根ネットを背景とした独自のUGC文化を花開かせました。X68000はFM音源（YM2151）、ADPCM（MSM6258）を搭載し、当時としてはハイスペックな音源で音楽表現に優れるという特徴を有していました。 Photo: tmizo そのX68000を所有するパソコン通信ユーザーを中心に広く流通した音楽データが、X68000シリーズ用の内蔵音源ドライ
最近作っている 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) 生
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
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
MDX
import { MDXBreadboard } from 'mdx-breadboard' MDXC ==== MDXC is a tool to convert Markdown into React Components. It lets you `import` and use other Components within your Markdown. Like so: <MDXBreadboard defaultMode='view' defaultSource={` import { MDXBreadboard } from 'mdx-breadboard' _Turtles?_ <MDXBreadboard defaultSource='**Turtles!**' /> `} /> MDXC also lets you: - Use custom components to
GitHub - jxnblk/mdx-deck: ♠️ React MDX-based presentation decks
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
This release adds support for HTML, Vue, Angular and MDX. It also respects decorator position, adds an option for JSX single quotes, allows parser inference via shebang, adds support for several new syntax features, and has a few formatting tweaks. Highlights HTML/Vue/Angular Support HTML, Vue, and Angular (#5259 by @ikatyang, #4753 by @evilebottnawi, #2083 by @azz) Prettier can now format HTML, V
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 (@
WEBエンジニア勉強会 初LT感想と参加レポート / 「MDX-DeckとCode Surferでスライドを作ろう！」補足情報 | Takumon Blog
なにこれ 2019/2/1(金)、WEBエンジニア勉強会 #11でLTしてきました。 本記事では自分のLTスライドと、10分の枠では伝えきれなかった補足情報を紹介します。 また他の方のLTの様子や、勉強会の雰囲気なども参加レポートとして書いています。 LTの反響 Twitterを見るとMDX-Deckに少しでも興味をもっていただけたようでうれしいです。 よく考えたらスライド作成ツールの紹介をするスライド作るのってハードル高くてしんどいよな・・・ こんな表現・アニメーションできるんだぜって見せつけなきゃいけないんだから、たくもんさんすごい #webエンジニア勉強会11 — ngmt (@ngmt83) February 1, 2019 隣に座っている、みずりゅさんが手に持ったものを落としそうになるぐらいスゴイ、それが MDX-DECK！w #WEBエンジニア勉強会11 — いわしまん (@
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🔌
Getting startedThis article explains how to integrate MDX into your project. It shows how to use MDX with your bundler and JSX runtime of choice. To understand how the MDX format works, we recommend that you start with § What is MDX. See § Using MDX when you’re all set up and ready to use MDX. ContentsPrerequisitesQuick startBundlerJSXEditorTypesSecurityIntegrationsBundlersBuild systemsCompilersSi
ＭＤＸの部屋
ＭＤＸＤＲＶ．ＥＸＥ ｍｄｘｄｒｖ.ｅｘｅに拡張子ｍｄｘの曲データをドラッグ＆ドロップする。 ＭＤＸＤＲＶ用のファイルセレクタ ＭＸＤＬＰ．ＥＸＥ 曲データ
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 ってファイル大量になりがちで、管理コスト高い
難解クエリー言語「MDX」に挑戦一覧
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
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に代わるフレームワークとして使える
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.
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=
SaTa.'s X68 Time [MDX Online AF] - 2009/ 8/15 (土) 下午10:06:40
／＼／＼／＼／＼／＼／＼／＼／＼／＼／＼／＼／＼／＼／＼／＼／＼／＼ MDX Online AF ひっそりとX68遺産をWindowsで楽しもう 更新日時 2009/ 8/15 (土) 下午10:06:40 ／＼／＼／＼／＼／＼／＼／＼／＼／＼／＼／＼／＼／＼／＼／＼／＼／＼
So high-performing, it earned its Type S™ status, the 2024 MDX Type S™ Ultra features a 3.0-litre turbo V6 that cranks out a whopping 355 hp and 354 lb.-ft. of torque* and distributes power where you need it most with rear-biased Super Handling All-Wheel Drive™* (SH-AWD®). Couple that with a Sensor Control Damper, 21” wheels, and front Brembo® brakes, and pretty soon you'll understand how raw powe
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
MDX Player
開発中です 無償の開発環境「Flex SDK」と、FM音源好きにはたまらないソフトウェア音源「SiON」の勉強を兼ねて、MXDRV（SHARP X68000用音楽ドライバー）のデータをFlash Playerで再生するプログラムを作ってみます。ActionScriptでコードを書くのは初めてなので、実験しながら機能を追加してゆくつもりです。まだまだ完成度は低いのですが、大目に見ていただけると嬉しいです。 JavaScriptだけで動作する「MDX Player (Web Audio API)」もあります。 仕様と言い訳 MDX/PDXファイルの変換にorg.si.sound.mdxパッケージを使用していないので、変換ミスがあったらこのMDX Playerの問題です。 MDXファイル読み込み完了後、PDXファイルの読み込みは自動では行われません。Flash Playerの仕様のため改善予定は
吉村洋文（大阪府知事） on Twitter: "生活保護が必要な人に最後の砦として生活保護を認めるのは当然。しかし、大阪市に転入してすぐ保護申請するケースが突出して多い。なんでだ？これを適正に審査するのは当たり前。だって大阪市民の税を使うんだから。https://t.co/do0S490mdX @YahooNewsTopics"
生活保護が必要な人に最後の砦として生活保護を認めるのは当然。しかし、大阪市に転入してすぐ保護申請するケースが突出して多い。なんでだ？これを適正に審査するのは当たり前。だって大阪市民の税を使うんだから。https://t.co/do0S490mdX @YahooNewsTopics
1-3.ファイル書き出し boardファイルが完成したら、3つのレイヤーのimageファイルを書き出しましょう。 画像は白黒、解像度は800にしましょう。 Topレイヤー Holesレイヤー Outlineレイヤー 2.モデラで基板切削 Eagleでimageデータを出力したら、fabmodule(CAM)に読み込ませましょう。 Fabmoduleとは MITで開発されたモデラを操作するためのソフトウェア(CAM)です。 http://kokompe.cba.mit.edu/downloads.html fabumoduleはUnix系のOSでしか動きません。そのため今のところ、Windowsでは使えません。 Fabmoduleの使い方 上記Unix系のPCにFabmoduleをダウンロードする ターミナルからコマンド「fab」でfabmoduleを立ち上げる 「from format」か
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
Next.js + MDXでブログを作った
今までブログは Notion を CMS として使ってたんだけど色々な理由で剥がすことにしました。 主要な理由としては そもそも Notion Blog が全然メンテされてなくて怖い 公式の Notion API がもうすぐ来るので Notion Blog で使う非公式 API が使えなくなりそうで怖い 数週間の単位で Cookie の有効期限が切れて記事が見れなくなる 謎にデプロイがコケまくるのでメンテがめんどくさい 普通に Notion 自体にドキュメント公開機能があるのにブログにする意味があまりない 画像アップしまくってるとすぐ Notion が課金を要求してくる 等が挙げられる。 今現状このブログも Notion Blog ではなく MDX から SSG している。 Notion はどっかのサービスと違ってしっかりとドキュメントをマークダウンでエクスポート出来る機能があるので移行も
時代は切削か！？MODELA MDX-15/20をFusion 360 CAMで使い倒す！趣味のCNCをしよう！【導入編】 - AIと３Ｄモデリングによる３Ｄデータの活用法とデジタル・ファブリケーションの実践！
・Autodek公式CAMポストライブラリ検索サイト Autodek CAM Post Library https://cam.autodesk.com/posts/ その他 Tormach POST PROCESSORS for Fusion 360 https://www.tormach.com/software-post-processor.html ・15L Slant-PRO Lathe Post Processor for SprutCAM Tormach Only Post ・15L Slant-Pro Lathe Tormach Post Processor for SprutCAM All Post ・Tormach Post Process for SprutCAM Tormach Only Post ・Tormach Post Processor for SprutC
Analysis Services では、多次元式 (MDX) 構文で関数を使用できます。 関数は任意の有効な MDX ステートメントで使用でき、クエリ、カスタム ロールアップ定義、およびその他の計算でよく使用されます。 このセクションでは、MDX 関数に関する情報を提供します。 以下の表では、戻り値の種類ごとに関数がまとめられています。また、目次には、関数名がアルファベット順に一覧表示されます。 配列関数 機能 説明
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 Player for iOS | NagisaWorks
多次元データベースクエリー言語「MDX」入門 ～MDX構文の基本文法（1）
X68000シリーズ由来の音楽データMDXをiPhoneで再生！MDX Player for iOSがリリース
MDX eXtended = MDXX | AMP対応 Markdown Compiler と静的サイトジェネレーター
GitHub - mdx-js/mdx: Markdown for the component era
Prettier 1.15: HTML, Vue, Angular and MDX Support · Prettier
ICS×MDX×DYU JOINT GRADUATION EXHIBITION
サイト構築のタスクを自動化する「Gatsby Recipes」とタスク記述言語としてのMDX - Qiita
MDX 2 | MDX
MDX
mdx
Gatsbyの超高速テンプレート(PWA, MDX, TypeScript対応)を作ったヨ！ - Qiita
GitHub - jxnblk/ok-mdx: Browser-based MDX editor
2024 Acura MDX: Mid Size Luxury 7-Seater SUV | Acura Canada
Rich docs with Storybook MDX
Eagleとモデラ(mdx-20)で基板をつくる方法 - Qiita
ユナイテッドのDSP「Bypass」、「Sizmek MDX」と連携～スマホへのリッチメディア広告展開が容易に
Amazon.co.jp: ローランド・ディー・ジー MODELA MDX-15: パソコン
MDX 関数リファレンス (MDX) - SQL Server
Okachi.js にて、MDX と Next.js について話しました - ARTICLES