问题

Question

问题

我在GitHub页面上有一个博客：https://silvuss.github.io。它由Bootstrap 4.1构建，使用markdown并由Jekyll渲染（Github Pages中的默认设置）。我已将所有Jekyll选项保留为默认设置。

问题是，目前每个页面都可以在较宽的屏幕上正确显示，但不是每个页面都可以在较窄的（移动）屏幕上正确显示。包含降价代码块（```）的页面在狭窄的屏幕上（例如375 x 667）不能正确显示。我注意到Jekyll将降价代码块呈现为<pre><code></code></pre>。

我希望包装文章的文本，而不是代码块中的代码。

到目前为止我做了什么

（1）到目前为止，我尝试使用CSS来包装所有内容（文本和代码块）。使用下面的代码，文本被包裹起来大约一半，并且代码块根本没有被包裹：

<style>
    pre, code {
        white-space: pre-wrap;
    }
</style>

（2）我还为<pre>和<code>尝试了word-break属性的不同值，但结果对于任何值都没有改变。

（3）正如Jekyll默认使用Kramdown一样，我还尝试更改了_config.yml文件中的coderay_wrap选项（目前在本地，不推送到GitHub）。但是，它的价值似乎都不起作用。我尝试了以下组合（都使用markdown: kramdown选项，而没有）：

# One try, seems not to change anything
markdown: kramdown
kramdown:
  coderay_wrap: span

# Another try, seems not to change anything
markdown: kramdown
kramdown:
  coderay_wrap: div

# Another try, seems not to change anything
markdown: kramdown
kramdown:
  coderay_wrap: nil

更新：抱歉，我更正了CSS代码，将pre更改为pre, code。

Answer 1

我遇到了一个问题，即代码栅栏 (```) 中的长文本在 Safari 中会换行而不是滚动。它在 FireFox 和 Chrome 中运行良好（代码块将滚动而不是自动换行）。我通过在syntax.css 文件中设置“word-wrap: normal”来解决它。（syntax.css 文件是包含 syntax highlighting 的 css）

示例：

.highlight code, .highlight pre { word-wrap: normal }

我的 Jekyll _config.yml 有以下设置：

highlighter: rouge
markdown: kramdown
kramdown: 
  input: GFM
  hard_wrap: false

我使用的是 Bootstrap v4.5.2 和 Jekyll v3.9.0 (GitHub pages Jekyll version)

如何使用Bootstrap在Jekyll中包装文本，而不是代码块？

问题

到目前为止我做了什么

1 个答案: