@schmitech/markdown-renderer 0.1.3 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -19,11 +19,19 @@ npm install @schmitech/markdown-renderer
|
|
|
19
19
|
|
|
20
20
|
## Usage
|
|
21
21
|
|
|
22
|
+
### React setup
|
|
23
|
+
|
|
24
|
+
In React applications (Vite, CRA, Next.js, etc.) simply import the component. The
|
|
25
|
+
library ships its base `.markdown-content` styles automatically. If you prefer to
|
|
26
|
+
manage styles yourself, you can also import them explicitly with
|
|
27
|
+
`import '@schmitech/markdown-renderer/styles';`.
|
|
28
|
+
|
|
22
29
|
### Basic Usage
|
|
23
30
|
|
|
24
31
|
```tsx
|
|
25
32
|
import { MarkdownRenderer } from '@schmitech/markdown-renderer';
|
|
26
|
-
|
|
33
|
+
// Base styles are injected automatically. If you want explicit control, add:
|
|
34
|
+
// import '@schmitech/markdown-renderer/styles';
|
|
27
35
|
|
|
28
36
|
function MyComponent() {
|
|
29
37
|
const content = `
|
|
@@ -42,7 +50,6 @@ And chemistry: $\\ce{H2O}$
|
|
|
42
50
|
|
|
43
51
|
```tsx
|
|
44
52
|
import { MarkdownRenderer } from '@schmitech/markdown-renderer';
|
|
45
|
-
import '@schmitech/markdown-renderer/styles';
|
|
46
53
|
|
|
47
54
|
function MyComponent() {
|
|
48
55
|
return (
|
|
@@ -81,18 +88,29 @@ function MyComponent() {
|
|
|
81
88
|
|
|
82
89
|
## Styling
|
|
83
90
|
|
|
84
|
-
|
|
91
|
+
The base stylesheet loads automatically when you import the library. You can also
|
|
92
|
+
pull it in manually if your bundler requires explicit CSS imports or you need to
|
|
93
|
+
override the defaults in a dedicated file:
|
|
85
94
|
|
|
86
95
|
```tsx
|
|
87
96
|
import '@schmitech/markdown-renderer/styles';
|
|
88
97
|
```
|
|
89
98
|
|
|
90
|
-
Or
|
|
99
|
+
Or reference the built CSS directly from your own stylesheets:
|
|
91
100
|
|
|
92
101
|
```css
|
|
93
102
|
@import '@schmitech/markdown-renderer/dist/MarkdownStyles.css';
|
|
94
103
|
```
|
|
95
104
|
|
|
105
|
+
To customize the look, add your own selectors that target the generated
|
|
106
|
+
`markdown-content` wrapper:
|
|
107
|
+
|
|
108
|
+
```css
|
|
109
|
+
.markdown-content h1 {
|
|
110
|
+
color: #7c3aed;
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
|
|
96
114
|
## License
|
|
97
115
|
|
|
98
|
-
Apache 2.0
|
|
116
|
+
Apache 2.0
|