markdown.module.css

1.markdown {
2  @apply text-gray-200;
3}
4
5.markdown h1,
6.markdown h2,
7.markdown h3,
8.markdown h4,
9.markdown h5,
10.markdown h6 {
11  @apply font-semibold text-gray-100 border-b border-gray-700 pb-3 mb-4 mt-6;
12}
13
14.markdown h1 {
15  @apply text-3xl;
16}
17
18.markdown h2 {
19  @apply text-2xl;
20}
21
22.markdown h3 {
23  @apply text-xl;
24}
25
26.markdown a {
27  @apply text-blue-400 hover:underline;
28}
29
30.markdown p {
31  @apply mb-4 leading-relaxed;
32}
33
34.markdown ul,
35.markdown ol {
36  @apply mb-4 pl-8;
37}
38
39.markdown ul {
40  @apply list-disc;
41}
42
43.markdown ol {
44  @apply list-decimal;
45}
46
47.markdown li {
48  @apply mb-1;
49}
50
51.markdown blockquote {
52  @apply border-l-4 border-gray-700 pl-4 italic my-4 text-gray-400;
53}
54
55.markdown pre {
56  @apply bg-[#1e1e2e] rounded-lg p-4 mb-4 overflow-x-auto relative;
57}
58
59.markdown code {
60  @apply bg-[#1e1e2e] px-1.5 py-0.5 rounded text-sm font-mono;
61}
62
63.markdown pre code {
64  @apply bg-transparent p-0 text-gray-200;
65}
66
67.markdown table {
68  @apply w-full mb-4 border-collapse;
69}
70
71.markdown th,
72.markdown td {
73  @apply border border-gray-700 px-4 py-2;
74}
75
76.markdown th {
77  @apply bg-gray-800 font-semibold;
78}
79
80.markdown img {
81  @apply max-w-full rounded-lg my-4;
82}
83
84.markdown hr {
85  @apply border-gray-700 my-8;
86}
87
88.markdown details {
89  @apply mb-4;
90}
91
92.markdown summary {
93  @apply cursor-pointer;
94}
95
96.markdown kbd {
97  @apply px-2 py-1 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-400 rounded-lg;
98}
99
100.markdown :global(input[type="checkbox"]) {
101  @apply mr-2;
102}
103
104.markdown :global(.hljs) {
105  @apply bg-transparent text-gray-200;
106}
107
108.markdown :global(.alert) {
109  @apply p-4 mb-4 rounded-lg border;
110}
111
112.markdown :global(.alert-info) {
113  @apply bg-blue-900/20 border-blue-700 text-blue-100;
114}
115
116.markdown :global(.alert-warning) {
117  @apply bg-yellow-900/20 border-yellow-700 text-yellow-100;
118}
119
120.markdown :global(.alert-danger) {
121  @apply bg-red-900/20 border-red-700 text-red-100;
122}
123
124.codeWrapper {
125  @apply bg-[#1e1e2e] rounded-lg relative;
126}
127
128.copyButton {
129  @apply absolute top-2 right-2 p-2 bg-gray-800 text-gray-300 rounded-lg 
130    opacity-0 group-hover:opacity-100 transition-opacity duration-200 
131    hover:bg-gray-700;
132}
133
134.customVideoPlayer {
135  @apply my-8;
136}
137
138.customImageViewer {
139  @apply my-8;
140}
141