Skip to content

Commit 009e016

Browse files
codingpaulacodingpaula
committed
use ocean syntax highlighting from copied file
1 parent 36e53c2 commit 009e016

File tree

2 files changed

+2
-193
lines changed

2 files changed

+2
-193
lines changed

‎lib/App.js

+1-96
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "/web_modules/react.js";
22
import styled from "/web_modules/styled-components.js";
33
import SyntaxHighlighter from "/web_modules/react-syntax-highlighter.js";
4+
import { ocean } from "./ocean.js";
45
const code = "# properly introduce yourself\ndef goodManners():\n print('my name is Paula.')";
56
const customStyles = {
67
padding: "1rem 1.5rem",
@@ -57,102 +58,6 @@ const Link = styled.a`
5758
top: 0px;
5859
}
5960
`;
60-
const ocean = {
61-
"hljs-comment": {
62-
"color": "#65737e"
63-
},
64-
"hljs-quote": {
65-
"color": "#65737e"
66-
},
67-
"hljs-variable": {
68-
"color": "#bf616a"
69-
},
70-
"hljs-template-variable": {
71-
"color": "#bf616a"
72-
},
73-
"hljs-tag": {
74-
"color": "#bf616a"
75-
},
76-
"hljs-name": {
77-
"color": "#bf616a"
78-
},
79-
"hljs-selector-id": {
80-
"color": "#bf616a"
81-
},
82-
"hljs-selector-class": {
83-
"color": "#bf616a"
84-
},
85-
"hljs-regexp": {
86-
"color": "#bf616a"
87-
},
88-
"hljs-deletion": {
89-
"color": "#bf616a"
90-
},
91-
"hljs-number": {
92-
"color": "#d08770"
93-
},
94-
"hljs-built_in": {
95-
"color": "#d08770"
96-
},
97-
"hljs-builtin-name": {
98-
"color": "#d08770"
99-
},
100-
"hljs-literal": {
101-
"color": "#d08770"
102-
},
103-
"hljs-type": {
104-
"color": "#d08770"
105-
},
106-
"hljs-params": {
107-
"color": "#d08770"
108-
},
109-
"hljs-meta": {
110-
"color": "#d08770"
111-
},
112-
"hljs-link": {
113-
"color": "#d08770"
114-
},
115-
"hljs-attribute": {
116-
"color": "#ebcb8b"
117-
},
118-
"hljs-string": {
119-
"color": "#a3be8c"
120-
},
121-
"hljs-symbol": {
122-
"color": "#a3be8c"
123-
},
124-
"hljs-bullet": {
125-
"color": "#a3be8c"
126-
},
127-
"hljs-addition": {
128-
"color": "#a3be8c"
129-
},
130-
"hljs-title": {
131-
"color": "#8fa1b3"
132-
},
133-
"hljs-section": {
134-
"color": "#8fa1b3"
135-
},
136-
"hljs-keyword": {
137-
"color": "#b48ead"
138-
},
139-
"hljs-selector-tag": {
140-
"color": "#b48ead"
141-
},
142-
"hljs": {
143-
"display": "block",
144-
"overflowX": "auto",
145-
"background": "#2b303b",
146-
"color": "#c0c5ce",
147-
"padding": "0.5em"
148-
},
149-
"hljs-emphasis": {
150-
"fontStyle": "italic"
151-
},
152-
"hljs-strong": {
153-
"fontWeight": "bold"
154-
}
155-
};
15661

15762
const App = () => {
15863
return /*#__PURE__*/React.createElement(AppDiv, null, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(H1, null, "Hello."), /*#__PURE__*/React.createElement(SyntaxHighlighter, {

‎src/App.js

+1-97
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
22
import styled from "styled-components";
33
import SyntaxHighlighter from 'react-syntax-highlighter';
4+
import { ocean } from './ocean.js';
45

56
const code =
67
"# properly introduce yourself\ndef goodManners():\n print('my name is Paula.')";
@@ -66,103 +67,6 @@ const Link = styled.a`
6667
}
6768
`;
6869

69-
const ocean = {
70-
"hljs-comment": {
71-
"color": "#65737e"
72-
},
73-
"hljs-quote": {
74-
"color": "#65737e"
75-
},
76-
"hljs-variable": {
77-
"color": "#bf616a"
78-
},
79-
"hljs-template-variable": {
80-
"color": "#bf616a"
81-
},
82-
"hljs-tag": {
83-
"color": "#bf616a"
84-
},
85-
"hljs-name": {
86-
"color": "#bf616a"
87-
},
88-
"hljs-selector-id": {
89-
"color": "#bf616a"
90-
},
91-
"hljs-selector-class": {
92-
"color": "#bf616a"
93-
},
94-
"hljs-regexp": {
95-
"color": "#bf616a"
96-
},
97-
"hljs-deletion": {
98-
"color": "#bf616a"
99-
},
100-
"hljs-number": {
101-
"color": "#d08770"
102-
},
103-
"hljs-built_in": {
104-
"color": "#d08770"
105-
},
106-
"hljs-builtin-name": {
107-
"color": "#d08770"
108-
},
109-
"hljs-literal": {
110-
"color": "#d08770"
111-
},
112-
"hljs-type": {
113-
"color": "#d08770"
114-
},
115-
"hljs-params": {
116-
"color": "#d08770"
117-
},
118-
"hljs-meta": {
119-
"color": "#d08770"
120-
},
121-
"hljs-link": {
122-
"color": "#d08770"
123-
},
124-
"hljs-attribute": {
125-
"color": "#ebcb8b"
126-
},
127-
"hljs-string": {
128-
"color": "#a3be8c"
129-
},
130-
"hljs-symbol": {
131-
"color": "#a3be8c"
132-
},
133-
"hljs-bullet": {
134-
"color": "#a3be8c"
135-
},
136-
"hljs-addition": {
137-
"color": "#a3be8c"
138-
},
139-
"hljs-title": {
140-
"color": "#8fa1b3"
141-
},
142-
"hljs-section": {
143-
"color": "#8fa1b3"
144-
},
145-
"hljs-keyword": {
146-
"color": "#b48ead"
147-
},
148-
"hljs-selector-tag": {
149-
"color": "#b48ead"
150-
},
151-
"hljs": {
152-
"display": "block",
153-
"overflowX": "auto",
154-
"background": "#2b303b",
155-
"color": "#c0c5ce",
156-
"padding": "0.5em"
157-
},
158-
"hljs-emphasis": {
159-
"fontStyle": "italic"
160-
},
161-
"hljs-strong": {
162-
"fontWeight": "bold"
163-
}
164-
};
165-
16670
const App = () => {
16771
return (
16872
<AppDiv>

0 commit comments

Comments
 (0)