Skip to content

Commit 7c4533c

Browse files
aromalanilaromalanil
authored
Merge pull request #2 from aromalanil/code-highlighting
👨🏻‍💻 Added code highlighting in preview
2 parents b2ff53e + 383aa70 commit 7c4533c

File tree

6 files changed

+246
-11
lines changed

6 files changed

+246
-11
lines changed

‎public/demo.webp ‎art/demo.webp

File renamed without changes.

‎package-lock.json

+46
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "markdown-editor",
3-
"version": "1.4.0",
3+
"version": "1.5.0",
44
"description": "A react app to preview and edit Markdown",
55
"private": true,
66
"author": {
@@ -16,6 +16,7 @@
1616
"@testing-library/user-event": "^7.2.1",
1717
"marked": "^0.8.2",
1818
"node-sass": "^4.13.1",
19+
"prismjs": "^1.21.0",
1920
"react": "^16.13.1",
2021
"react-dom": "^16.13.1",
2122
"react-scripts": "3.4.1",

‎src/App.scss

+8-10
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ $primary-color: #339989;
77
$primary-accent: #7de2d1;
88
$primary-text: #24292e;
99
$text-accent: #2b2c28;
10-
$white: #fffafb;
10+
$white: #fff;
1111
$gray: #eaecef;
1212
$dark-gray: #e1e4e8;
1313
$source-code-font: "Source Code Pro", monospace;
@@ -169,9 +169,11 @@ body {
169169
.html-div {
170170
p {
171171
margin: 0 0 1rem;
172+
line-height: 1.5;
172173
}
173174
a {
174175
color: $primary-color;
176+
text-decoration: none;
175177
&:hover {
176178
filter: brightness(1.2);
177179
}
@@ -182,21 +184,17 @@ body {
182184
margin: 24px 0;
183185
background-color: $dark-gray;
184186
}
185-
pre{
186-
background-color: $gray;
187-
padding:1rem;
187+
pre {
188+
padding: 1rem;
188189
width: 100%;
189190
overflow: auto;
190-
margin-top:0;
191-
margin-bottom:1rem;
191+
margin-top: 0;
192+
margin-bottom: 1rem;
192193
}
193194
code {
194-
font-size: 0.7rem;
195-
line-height: 1.2rem;
196195
font-family: $source-code-font;
197-
background-color: $gray;
198-
padding: 0.2rem;
199196
}
197+
200198
li + li {
201199
margin-top: 0.25em;
202200
}

‎src/components/MarkdownPreview.jsx

+6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
import React, { useState, useEffect } from "react";
22
import * as marked from "marked";
3+
import Prism from 'prismjs';
4+
import '../styles/github.css';
35

46
function MarkdownPreview({ content }) {
57
const [html, setHtml] = useState(getHtml(content));
68

9+
useEffect(()=>{
10+
Prism.highlightAll();
11+
})
12+
713
useEffect(() => {
814
setHtml(getHtml(content));
915
}, [content]);

‎src/styles/github.css

+184
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
/**
2+
* prism.js Github theme based on GitHub's theme.
3+
* @author Sam Clarke
4+
*/
5+
pre {
6+
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
7+
text-align: left;
8+
white-space: pre;
9+
word-spacing: normal;
10+
word-break: normal;
11+
word-wrap: normal;
12+
line-height: 1.45;
13+
padding: 0.8em;
14+
overflow: auto;
15+
font-size: 0.9em;
16+
border-radius: 6px;
17+
background: #f6f8fa;
18+
19+
-moz-tab-size: 8;
20+
-o-tab-size: 8;
21+
tab-size: 8;
22+
23+
-webkit-hyphens: none;
24+
-moz-hyphens: none;
25+
-ms-hyphens: none;
26+
hyphens: none;
27+
}
28+
29+
/* Inline code */
30+
:not(pre) > code {
31+
color: inherit;
32+
font-size: 85%;
33+
border-radius: 0.3em;
34+
white-space: normal;
35+
background: #f5f5f5;
36+
padding: 0.2em 0.4em;
37+
margin: 0;
38+
background-color: rgba(27, 31, 35, 0.05);
39+
}
40+
41+
.token.comment,
42+
.token.blockquote {
43+
color: #969896;
44+
}
45+
46+
.token.cdata {
47+
color: #183691;
48+
}
49+
50+
.token.doctype,
51+
.token.punctuation,
52+
.token.variable,
53+
.token.macro.property {
54+
color: #333;
55+
}
56+
57+
.token.operator,
58+
.token.important,
59+
.token.keyword,
60+
.token.rule,
61+
.token.builtin {
62+
color: #d73a49;
63+
}
64+
65+
.token.string,
66+
.token.url,
67+
.token.regex,
68+
.token.attr-value {
69+
color: #183691;
70+
}
71+
72+
.token.property,
73+
.token.number,
74+
.token.boolean,
75+
.token.entity,
76+
.token.atrule,
77+
.token.constant,
78+
.token.symbol,
79+
.token.command,
80+
.token.code {
81+
color: #0086b3;
82+
}
83+
84+
.token.tag,
85+
.token.selector,
86+
.token.prolog {
87+
color: #22863a;
88+
}
89+
90+
.token.function,
91+
.token.namespace,
92+
.token.pseudo-element,
93+
.token.class,
94+
.token.class-name,
95+
.token.pseudo-class,
96+
.token.id,
97+
.token.url-reference .token.variable,
98+
.token.attr-name {
99+
color: #6f42c1;
100+
}
101+
102+
.token.entity {
103+
cursor: help;
104+
}
105+
106+
.token.title,
107+
.token.title .token.punctuation {
108+
font-weight: bold;
109+
color: #1d3e81;
110+
}
111+
112+
.token.list {
113+
color: #ed6a43;
114+
}
115+
116+
.token.inserted {
117+
background-color: #eaffea;
118+
color: #55a532;
119+
}
120+
121+
.token.deleted {
122+
background-color: #ffecec;
123+
color: #bd2c00;
124+
}
125+
126+
.token.bold {
127+
font-weight: bold;
128+
}
129+
130+
.token.italic {
131+
font-style: italic;
132+
}
133+
134+
/* JSON */
135+
.language-json .token.property {
136+
color: #183691;
137+
}
138+
139+
.language-markup .token.tag .token.punctuation {
140+
color: #333;
141+
}
142+
143+
/* CSS */
144+
code.language-css,
145+
.language-css .token.function {
146+
color: #0086b3;
147+
}
148+
149+
/* YAML */
150+
.language-yaml .token.atrule {
151+
color: #63a35c;
152+
}
153+
154+
code.language-yaml {
155+
color: #183691;
156+
}
157+
158+
/* Ruby */
159+
.language-ruby .token.function {
160+
color: #333;
161+
}
162+
163+
/* Markdown */
164+
.language-markdown .token.url {
165+
color: #795da3;
166+
}
167+
168+
/* Makefile */
169+
.language-makefile .token.symbol {
170+
color: #795da3;
171+
}
172+
173+
.language-makefile .token.variable {
174+
color: #183691;
175+
}
176+
177+
.language-makefile .token.builtin {
178+
color: #0086b3;
179+
}
180+
181+
/* Bash */
182+
.language-bash .token.keyword {
183+
color: #0086b3;
184+
}

0 commit comments

Comments
 (0)