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
-
-
Card content
+
+
+
+
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
-
-
Card content
+
+
+
+
Card content
```
@@ -158,22 +170,22 @@ Yields:
```html