[英]Using Prismjs for syntax highlighted code blocks is breaking layout on mobile - <pre> element wont take dynamic width
我将 Prismjs 与 Mdx 一起用于与代码相关的博客。 我正在使用它以与其他博客一致的方式显示代码块。
我遇到了一个问题,即渲染的代码块(在我的移动布局上的<pre>
元素内部太宽。现在我满足于让东西在水平轴上滚动。我 99% 确定<pre>
元素破坏了布局,因为当我从博客文章中评论它们时,布局按预期工作。
具体来说,我正在使用一个名为prism-react-renderer
的 package(与 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
应用固定宽度时,我可以获得我想要的行为,但如果可能的话,我不想在此使用固定宽度。 我的.css
看起来像这样,包括一些明显无效的styles:
.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;
}
可能为时已晚,但我遇到了同样的问题,我能够通过
将max-width
css 属性添加到主布局。 该值应等于window.screen.width
。 我必须使用以下技巧才能获得屏幕尺寸:
const [windowWidth, setWindowWidth] = useState(width) useEffect(() => { setWindowWidth(window.screen.width) }, [])
添加overflow: scroll
到CodeBlock中的pre
不理想,但我发现 CSS 属性的这种组合一起工作:
pre code {
display: inline-block;
width: 80vw;
overflow-x: auto;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.