v0.0.6 - 코드 하이라이팅 기능 (#12)

* chore: v0.0.6으로 업데이트

* chore: highlight.js 설치

* feat(popup): 소스코드 블럭에 코드 하이라이팅 추가

* fix(getLanguageByFileName): filename 없을 때, 얼리 리턴 처리

* feat(popup): 확장자 안내 메시지 추가

Author: Jaymyong66

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "codezap-chrome-extension",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "코드잽 크롬 익스텐션입니다",
   "scripts": {
     "start": "webpack --watch --progress --config webpack.dev.js",
@@ -24,5 +24,8 @@
     "webpack-cli": "^5.1.4"
   },
   "author": "jayMyong66",
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "highlight.js": "^11.10.0"
+  }
 }

package.json

@@ -169,3 +169,31 @@
 
   background-color: white;
 }
+
+.sourceCodeWrapper {
+  width: 300px;
+  border: 1px solid black;
+  border-top: 0;
+  border-radius: 0 0 4px 4px;
+  padding: 8px;
+}
+
+.pre {
+  overflow-x: auto;
+  overflow-y: hidden;
+  max-width: 100%;
+  text-indent: 0;
+}
+
+.codeBlock {
+  cursor: auto;
+  text-indent: 0;
+}
+
+.filenameMessage {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  font-size: 10px;
+  color: #393e46;
+}

src/popup/popup.module.css

@@ -28,6 +28,9 @@ import styles from './popup.module.css';
 import '../styles/reset.css';
 import VisibilityToggle from '../components/VisibilityToggle/VisibilityToggle';
 import { urlToDescription } from '../utils/urlToDescription';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/github.css';
+import { getLanguageByFilename } from '../utils/getLanguageByFileName';
 
 const Popup = () => {
   const [userInfo, setUserInfo] = useState<UserInfo>({
@@ -112,17 +115,11 @@ const Popup = () => {
       loadCategories(memberId);
       alert('로그인에 성공했어요!');
       // 추가
-      console.log('here ', name, memberId);
-      chrome.runtime.sendMessage(
-        {
-          action: 'sendUserInfo',
-          name,
-          memberId,
-        },
-        (response) => {
-          console.log('send message response', response);
-        }
-      );
+      chrome.runtime.sendMessage({
+        action: 'sendUserInfo',
+        name,
+        memberId,
+      });
       // 끝
     } catch (error) {
       console.error('로그인 에러: ', error);
@@ -333,20 +330,28 @@ const Popup = () => {
               toggleVisibility={toggleVisibility}
             />
           </div>
-          <div className={styles.checkboxContainer}>
-            <label className={styles.checkboxLabel}>
-              <input
-                type='checkbox'
-                className={styles.checkboxInput}
-                checked={attachUrl}
-                onChange={handleCheckboxChange}
-              />
-              <span className={styles.checkboxText}>출처 url 첨부</span>
-            </label>
+          <div style={{ width: '100%' }}>
+            <div className={styles.checkboxContainer}>
+              <label className={styles.checkboxLabel}>
+                <input
+                  type='checkbox'
+                  className={styles.checkboxInput}
+                  checked={attachUrl}
+                  onChange={handleCheckboxChange}
+                />
+                <span className={styles.checkboxText}>출처 url 첨부</span>
+              </label>
+            </div>
+            {sourceCodes.length !== 0 && (
+              <div className={styles.filenameMessage}>
+                확장자를 입력하면 코드 스타일이 생겨요
+              </div>
+            )}
           </div>
           {sourceCodes.length === 0 && (
             <div>원하는 소스코드를 드래그 후 우클릭 하여 추가해보세요</div>
           )}
+
           {sourceCodes.map((code, index) => (
             <div key={index} className={styles.sourceCodeContainer}>
               <input
@@ -356,13 +361,19 @@ const Popup = () => {
                 value={fileNames[index]}
                 onChange={(e) => handleFileNameChange(index, e.target.value)}
               />
-              <textarea
-                readOnly
-                value={code}
-                rows={4}
-                cols={35}
-                className={styles.sourceCodeTextArea}
-              />
+              <div className={styles.sourceCodeWrapper}>
+                <pre className={styles.pre}>
+                  <code
+                    className={styles.codeBlock}
+                    dangerouslySetInnerHTML={{
+                      __html: hljs.highlight(code, {
+                        language: getLanguageByFilename(fileNames[index]),
+                      }).value,
+                    }}
+                  />
+                </pre>
+              </div>
+
               <button
                 onClick={() => handleRemoveSourceCode(index)}
                 className={styles.removeButton}

src/popup/popup.tsx

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "코드잽 익스텐션",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "코드잽 템플릿 업로드를 도와주는 익스텐션입니다.",
   "permissions": ["contextMenus", "storage", "scripting", "activeTab"],
   "host_permissions": ["https://code-zap.com/*", "https://www.code-zap.com/*"],

src/static/manifest.json

@@ -0,0 +1,168 @@
+export const getLanguageByFilename = (filename: string) => {
+  const extension = getFileExtension(filename);
+  const language = getLanguageByExtension(extension);
+
+  return language;
+};
+
+export const getLanguageForAutoTag = (filename: string) => {
+  const extension = getFileExtension(filename);
+  const language = getLanguageByExtension(extension);
+
+  if (extension === 'jsx' || extension === 'tsx') {
+    return 'react';
+  }
+
+  if (language === 'plaintext') {
+    return '';
+  }
+
+  return language;
+};
+
+const getFileExtension = (filename: string) => {
+  if (!filename) {
+    return '';
+  }
+  if (filename.includes('.')) {
+    const parts = filename.split('.');
+
+    return parts.pop() || '';
+  }
+
+  return '';
+};
+
+const getLanguageByExtension = (extension: string) =>
+  extensionToLanguage[extension] || 'plaintext';
+
+const extensionToLanguage: { [key: string]: string } = {
+  '1c': '1c',
+  adoc: 'asciidoc',
+  ado: 'stata',
+  adb: 'ada',
+  ads: 'ada',
+  applescript: 'applescript',
+  as: 'actionscript',
+  asc: 'asciidoc',
+  asm: 'x86asm',
+  asp: 'asp',
+  awk: 'awk',
+  bash: 'bash',
+  bas: 'basic',
+  bat: 'dos',
+  bf: 'brainfuck',
+  bmx: 'blitzmax',
+  boo: 'boo',
+  c: 'c',
+  cbl: 'cobol',
+  cc: 'cpp',
+  clj: 'clojure',
+  cls: 'cos',
+  cmake: 'cmake',
+  coffee: 'coffeescript',
+  cpp: 'cpp',
+  hpp: 'cpp',
+  cr: 'crystal',
+  cs: 'csharp',
+  css: 'css',
+  cxx: 'cpp',
+  d: 'd',
+  dart: 'dart',
+  dcl: 'clean',
+  dfm: 'delphi',
+  dpr: 'delphi',
+  druby: 'ruby',
+  dsconfig: 'dsconfig',
+  dts: 'dts',
+  ecl: 'ecl',
+  elm: 'elm',
+  erl: 'erlang',
+  ex: 'elixir',
+  exs: 'elixir',
+  f90: 'fortran',
+  for: 'fortran',
+  frag: 'glsl',
+  fs: 'fsharp',
+  gemspec: 'ruby',
+  glsl: 'glsl',
+  go: 'go',
+  gql: 'graphql',
+  gradle: 'gradle',
+  graphql: 'graphql',
+  groovy: 'groovy',
+  haml: 'haml',
+  hbs: 'handlebars',
+  hcl: 'hcl',
+  hlsl: 'hlsl',
+  hs: 'haskell',
+  html: 'html',
+  hx: 'haxe',
+  hxx: 'cpp',
+  iced: 'iced',
+  idl: 'idl',
+  ini: 'ini',
+  ino: 'arduino',
+  i7x: 'inform7',
+  ipynb: 'python',
+  java: 'java',
+  jl: 'julia',
+  js: 'javascript',
+  jsx: 'javascript',
+  kt: 'kotlin',
+  less: 'less',
+  lhs: 'haskell',
+  lisp: 'lisp',
+  lock: 'yaml',
+  lua: 'lua',
+  m: 'objectivec',
+  mak: 'makefile',
+  markdown: 'markdown',
+  md: 'markdown',
+  mk: 'makefile',
+  ml: 'ocaml',
+  mli: 'ocaml',
+  ms: 'javascript',
+  nix: 'nix',
+  nsi: 'nsis',
+  nsh: 'nsis',
+  nu: 'nu',
+  php: 'php',
+  pl: 'perl',
+  pm: 'perl',
+  pyd: 'python',
+  py: 'python',
+  r: 'r',
+  rake: 'ruby',
+  rb: 'ruby',
+  rhtml: 'erb',
+  rs: 'rust',
+  rss: 'xml',
+  sass: 'sass',
+  scala: 'scala',
+  scss: 'scss',
+  sh: 'shell',
+  sls: 'yaml',
+  spec: 'ruby',
+  sql: 'sql',
+  styl: 'stylus',
+  swift: 'swift',
+  tex: 'latex',
+  thor: 'ruby',
+  toml: 'toml',
+  ts: 'typescript',
+  tsx: 'typescript',
+  txt: 'plaintext',
+  vala: 'vala',
+  vb: 'vbnet',
+  vbs: 'vbscript',
+  vh: 'verilog',
+  vhdl: 'vhdl',
+  vim: 'vim',
+  vue: 'vue',
+  xhtml: 'xml',
+  xml: 'xml',
+  xquery: 'xquery',
+  yml: 'yaml',
+  zep: 'zephir',
+};