$$config title: [gatsby] 폰트, 코드하이라이터 적용 keywords: - IT - gatsby $$ # 폰트 ```js // gatsby-browser.js import "./src/styles/global.css"; // src/styles/global.css @font-face { font-family: "GmarketSansMedium"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff"); font-weight: normal; font-style: normal; } html > body { font-family: "GmarketSansMedium"; text-underline-position: under; } ``` # 코드하이리이팅 - npm i prism-react-renderer 설치 ```js // blog/another-post/index.mdx ```js const a = 10; ``` ```html

안녕하세요.

``` ```js // src/components/CodeBlock.js import React from "react"; import Highlight, { defaultProps } from "prism-react-renderer"; import theme from "prism-react-renderer/themes/github"; // 테마는 github 외에도 많다 const CodeBlock = ({ children }) => { // 언어를 찾기위한 과정 const className = children.props.className || ""; const matches = className.match(/language-(?.*)/); const language = matches?.groups?.lang ?? ""; return ( {({ className, tokens, getLineProps, getTokenProps }) => (

          {tokens.map((line, i) => (
            
              {line.map((token, key) => (
                
              ))}
            
          ))}

)} ); }; export default CodeBlock; // src/pages/blog/{mdx.slug}.js import CodeBlock from "../../components/CodeBlock"; import { MDXProvider } from "@mdx-js/react"; {data.mdx.body} ```