1

我将 Prismjs 与 Mdx 一起用于与代码相关的博客。我正在使用它以与其他博客一致的方式显示代码块。

我遇到了一个问题,即渲染的代码块(<pre>元素内部在我的移动布局上太宽了。现在我满足于让东西在水平轴上滚动。我 99% 确定<pre>元素是什么破坏了布局,因为当我从博客文章中评论它们时,布局按预期工作。

具体来说,我正在使用一个名为prism-react-renderer(与 Gatsby 一起)的包,并且我为CodeBlock元素(处理语法突出显示)所拥有的代码或多或少是从文档中逐字逐句的prism-react-renderer,但为了方便起见,将其包含在此处:

import React from 'react'
import Highlight, { defaultProps } from 'prism-react-renderer'
import theme from 'prism-react-renderer/themes/nightOwl'

const CodeBlock = (props) => {
  const className = props.children.props.className || ''
  const matches = className.match(/language-(?<lang>.*)/)
  return (
    <Highlight {...defaultProps} code={props.children.props.children.trim()} language={
      matches && matches.groups && matches.groups.lang
        ? matches.groups.lang
        : ''
    }
      theme={theme}>
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <pre className={className} style={{ ...style }}>
          <code>
            {tokens.map((line, i) => (
              <div key={i} {...getLineProps({ line, key: i })}>
                {line.map((token, key) => (
                  <span key={key} {...getTokenProps({ token, key })} />
                ))}
              </div>
            ))}
          </code>
        </pre>
      )}
    </Highlight>
  )
}

export default CodeBlock

这是博客文章模板中使用的组件,用于处理将.mdx文件呈现为 HTML:

import React from 'react'
import { Link, graphql } from 'gatsby'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import { MDXProvider } from '@mdx-js/react'
import Layout from '../components/layout'
import CodeBlock from '../components/code-block'

const components = {
  pre: CodeBlock
}

const BlogPostTemplate = ({ data, pageContext, location }) => {
  const post = data.mdx
  const { previous, next } = pageContext

  return (
    <Layout>
      *** Removed irrelevant component ***
      <MDXProvider components={components}>
        <div className='blog-post-wrapper'>
          <article className='blog-post-content'>
            <header>
              <h1>
                {post.frontmatter.title}
              </h1>
              <time dateTime={post.frontmatter.date}>
                {post.frontmatter.date}
              </time>
            </header>
            <MDXRenderer>{post.body}</MDXRenderer>
          </article>
          <footer className='blog-post-footer'>
           *** Removed irrelevant components ***
          </footer>
        </div>
      </MDXProvider>
    </Layout>
  )
}

export default BlogPostTemplate

我尝试了一些不同的方法:flex 收缩,应用overflow-x: scroll到元素和它overflow-x: auto<pre>父元素。当我将固定宽度应用于<pre>元素时,overflow-x: scroll我可以获得我想要的行为,但如果可能的话,我不想在此使用固定宽度。.cssI have 看起来像这样,包括一些明显无效的样式:

.blog-post-wrapper {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  overflow-x: scroll;
}

.blog-post-content {
  flex-grow: 1;
  margin-bottom: 2rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  overflow-x: scroll;
}

.blog-post-content .prism-code {
  padding: 20px;
  border: 3px solid red;
  flex-shrink: 1;
  overflow-y: scroll;
  overflow-x: scroll;
}

我将<pre>在检查器中附上元素当前呈现方式的图像: 在移动布局中将代码块推送到内容区域之外的图像。

如果我设置固定宽度(在检查器中),这就是它的外观: 固定宽度代码块的图像,具有预期的溢出 x 行为 - 如果 x 轴上的内容溢出,则它会滚动。

4

1 回答 1

1

可能为时已晚,但我遇到了同样的问题,我能够通过

  1. max-widthcss 属性添加到主布局。该值应等于window.screen.width。我必须使用以下技巧才能获得屏幕尺寸:

    const [windowWidth, setWindowWidth] = useState(width)
    useEffect(() => {
        setWindowWidth(window.screen.width)
    }, [])
    
  2. 添加overflow: scrollpre代码块中

于 2021-07-18T15:56:35.213 回答