基于react搭建自己的blog网站(三)

地址

代码块高亮

CodeBlock.js

import React from 'react'
import Highlight, { defaultProps } from 'prism-react-renderer'
import theme from 'prism-react-renderer/themes/github' // 这个可以自定义主题
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
import { mdx } from '@mdx-js/react'

export default ({ children, className, live, render }) => {
  const language = className.replace(/language-/, '')

  if (live) {
    return (
      <div style={{ marginTop: '40px', backgroundColor: 'black' }}>
        <LiveProvider code={children.trim()} transformCode={(code) => '/** @jsx mdx */' + code} scope={{ mdx }}>
          <LivePreview />
          <LiveEditor />
          <LiveError />
        </LiveProvider>
      </div>
    )
  }

  if (render) {
    return (
      <div style={{ marginTop: '40px' }}>
        <LiveProvider code={children}>
          <LivePreview />
        </LiveProvider>
      </div>
    )
  }

  return (
    <Highlight {...defaultProps} code={children.trim()} language={language} theme={theme}>
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <pre className={className} style={{ ...style, padding: '20px' }}>
          {tokens.map((line, i) => (
            <div key={i} {...getLineProps({ line, key: i })}>
              {line.map((token, key) => (
                <span key={key} {...getTokenProps({ token, key })} />
              ))}
            </div>
          ))}
        </pre>
      )}
    </Highlight>
  )
}

CodeBlockHighLight.js

import React from 'react'
import { MDXProvider } from '@mdx-js/react'
import { Container, baseStyles } from 'unified-ui'

import CodeBlock from './CodeBlock'

const Style = ({ children }) => (
  <style
    dangerouslySetInnerHTML={{
      __html: children,
    }}
  />
)

const components = {
  h1: (props) => <h1 {...props} />,
  pre: (props) => <div style={{ backgroundColor: '#d3dcbc' }} {...props} />,
  code: CodeBlock,
}

export default (props) => (
  <MDXProvider components={components}>
    <>
      <Style>{baseStyles}</Style>
      <Container {...props} />
    </>
  </MDXProvider>
)

其他

发布

  • 可以在GitPage上发布,建议vercel,不用安装,关联 gihub 后推代码就行
  • 如有问题,欢迎指出!
posted @ 2021-01-25 11:11  XScrisscross  阅读(151)  评论(0)  编辑  收藏  举报