From 0286585a0e404360c59b9fda4f7727ee952b29cf Mon Sep 17 00:00:00 2001 From: brklntmhwk_w <86272619+brklntmhwk@users.noreply.github.com.> Date: Fri, 1 Nov 2024 10:12:33 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20=F0=9F=93=96=20tweak=20README?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 48 ++++++++++++++++++++++++++++++------------------ 1 file changed, 30 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 78f0b2b..bdd6916 100644 --- a/README.md +++ b/README.md @@ -23,25 +23,25 @@ To install the plugin: With `npm`: ```bash -npm install remark-card --save-dev +npm install remark-card ``` With `yarn`: ```bash -yarn add --dev remark-card +yarn add remark-card ``` With `pnpm`: ```bash -pnpm add -D remark-card +pnpm add remark-card ``` With `bun`: ```bash -bun install -D remark-card +bun install remark-card ``` ### Usage @@ -90,22 +90,32 @@ Yields: ```html
-
image alt
-
Card content
+
+ image alt +
+
Card content
``` At the moment, it takes the following option(s): ```ts -export interface Config { +export type Config = { // Whether or not to use custom HTML tags for both `card` and `card-grid`. By default, it's set to `false`. - customHTMLTags: { - enabled: boolean - } + customHTMLTags?: { + enabled: boolean; + }; + cardGridClass?: string; + cardClass?: string; + imageContainerClass?: string; + contentContainerClass?: string; } ``` +> [!QUESTION] +> **Why do we need those card & card grid class options?** +> \- Since [MDX 2](https://mdxjs.com/blog/v2/), the compiler has come to throw an error "Could not parse expression with acorn: $error" whenever there are unescaped curly braces and the expression inside them is invalid. This breaking change leads the directive syntax (`:::xxx{a=b}`) to cause the error, so the options are like an escape hatch for that situation. + For more possible patterns and in-depths explanations on the generic syntax(e.g., `:::something[...]{...}`), see `./test/index.test.ts` and [this page](https://talk.commonmark.org/t/generic-directives-plugins-syntax/444/1), respectively. ### Syntax @@ -125,8 +135,10 @@ Yields: ```html
-
image alt
-
Card content
+
+ image alt +
+
Card content
``` @@ -158,22 +170,22 @@ Yields: ```html
-
+
card 1
-
Card 1
+
Card 1
-
+
card 2
-
Card 2
+
Card 2
-
+
card 3
-
Card 3
+
Card 3
```