#33 refactor: Gatsby HighLight (코드블럭) 컬러 개선

msung99 · Jun 21, 2024 · ca15856 · ca15856
1 parent 7034eb3
commit ca15856
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 14 deletions.
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -5,6 +5,5 @@
  */
 
 // You can delete this file if you're not using it
-import 'prismjs/themes/prism-tomorrow.css';
 import "fontsource-noto-sans-kr";
 import "fontsource-noto-sans-kr/700.css";
diff --git a/src/components/post/post-content/index.jsx b/src/components/post/post-content/index.jsx
@@ -2,11 +2,13 @@ import React from "react";
 import styled from "styled-components"
 import TableOfContents from "../../toc";
 import { ContentWrapper, HtmlWrapper } from "./post-style";
+import CodeHighLight from "./code-highlight";
 
 const PostContent = ({html, toc}) => {
   return (
     <ContentWrapper>
       <TableOfContents content={toc}/>
+      <CodeHighLight/>
       <HtmlWrapper>
         <section dangerouslySetInnerHTML={{ __html: html}} itemProp="postContent" />
       </HtmlWrapper>

diff --git a/src/components/post/post-content/post-style/index.jsx b/src/components/post/post-content/post-style/index.jsx
@@ -178,18 +178,6 @@ export const HtmlWrapper = styled.div`
     margin-top: 10px;
     margin-bottom: 10px;
   }
-
-  .gatsby-highlight {
-    font-size: 13.5px;
-    margin-bottom: 50px;
-    word-break: break-all;
-
-    .language-text {
-      background-color: ${props => props.theme.post.content.blockquote.body};
-      font-size: 13.5px;
-      color: ${props => props.theme.post.content.blockquote.text};
-    }
-  }
   
   .language-text {
     background-color: ${props => props.theme.post.content.language.bg};
@@ -201,4 +189,7 @@ export const HtmlWrapper = styled.div`
     word-break: break-all;
   }
 }
-`
+`
+
+
+
diff --git a/src/constants/themeConstants.jsx b/src/constants/themeConstants.jsx
@@ -47,6 +47,19 @@ export const LIGHT_THEME_COLORS = {
       hover: 'black',
     },
     content: {
+      highlight: {
+        background: '#f7f6f3',
+        set1: 'color: hsl(230, 4%, 64%)',
+        set2: 'color: hsl(230, 8%, 24%)',
+        set3: 'color: hsl(35, 99%, 36%)',
+        set4: '',
+        set5: '',
+        set6: '',
+        set7: '',
+        set8: '',
+        set9: '',
+        set10: ''
+      },
       text: 'black',
       blockquote: {
         body: '#f7f6f2',
@@ -134,6 +147,19 @@ export const DARK_THEME_COLORS = {
       hover: '#e8e8e8',
     },
     content: {
+      highlight: {
+        background: '#222222',
+        set1: '#999',
+        set2: '#ccc',
+        set3: '#e2777a',
+        set4: '#6196cc',
+        set5: '#f08d49',
+        set6: '#f8c555',
+        set7: '#cc99cd',
+        set8: '#7ec699',
+        set9: '#67cdcc',
+        set10: 'green'
+      },
       text: '#e8e8e8',
       blockquote: {
         body: '#212121',

diff --git a/src/contents/posts/how-to-use/포스트 작성하기/index.md b/src/contents/posts/how-to-use/포스트 작성하기/index.md
@@ -21,6 +21,27 @@ previewImage: "writing.png"
 
 마크다운 파일을 생성했다면, 해당 포스트에 대한 메타정보를 필수로 기입해야 합니다. 기입 정보는 아래와 같습니다.
 
+```java
+public String getLines(){
+  StringBuilder stringBuilder = new StringBuilder();
+  repeatPrint(stringBuilder);
+  return stringBuilder.toString();
+}
+
+private void repeatRows(StringBuilder stringBuilder){
+  for(int i=0; i<10; i++){
+    repeatRow(stringBuilder);
+    stringBuilder.append("two");
+  }
+}
+
+private void repeatRow(StringBuilder stringBuilder){
+  for(int i=0; i<5; i++){
+    stringBuilder.append("one");
+  }
+}
+```
+
 ```
 ---
 title: 포스트 작성법, 작성시 세부 기능들