Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

当代码块内代码过长时,无法横向滚动代码块 #284

Closed
3 tasks done
ShawJie opened this issue Nov 30, 2023 · 1 comment
Closed
3 tasks done

当代码块内代码过长时,无法横向滚动代码块 #284

ShawJie opened this issue Nov 30, 2023 · 1 comment
Labels
bug Something isn't working

Comments

@ShawJie
Copy link
Contributor

ShawJie commented Nov 30, 2023

Issue Checklist | Issue 检查清单

Expected behavior | 预期行为

当代码块内代码过长时,展开代码块后代码可以左右横向滚动。

代码内容被边缘遮挡,但是无法通过滚动进行被遮挡的代码内容查看
image

Actual behavior | 实际行为

  • Links to demo site with this issue (发生问题的文章)[https://shawjie.cn/2021/04/24/spring-dev-tools/]
  • Links to source code of the blog with this issue (发生问题的博客仓库)[https://github.com/ShawJie/shawjie.github.io]
  • Screenshots(屏幕截图)
image

Steps to reproduce the behavior | 重现步骤

  1. 创建一个新的Hexo网站
  2. 安装Keep主题并针对主题进行简单的配置
  3. 输入 hexo new post anytitle 创建新的post
  4. 在post中编辑行最终高度大于250px且单行较长的代码块
  5. hexo clean && hexo server --open
  6. 预览刚刚编辑的代码块

Node.js and NPM Information | Node.js 和 NPM 信息

v18.14.1
9.3.1

Hexo Configuration | Hexo 配置

syntax_highlighter: highlight.js
highlight:
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

Keep Configuration | Keep 配置

# ---------------------------------------------------------------------------------------
# Docs: https://keep-docs.xpoet.cn/basis/configuration-guide/code_block.html
# ---------------------------------------------------------------------------------------
code_block:
  # Toolbar include: "code copy", "code block collapse" and "code language"
  tools:
    enable: true            # Option values: true | false
    style: mac          # Option values: default | mac
  highlight_theme: default   # Option values: default | obsidian

Other Information | 其它信息

浏览器:Chrome - 119.0.6045.199
操作系统: Macos - 13.6 (22G120)

@ShawJie ShawJie added the bug Something isn't working label Nov 30, 2023
@ShawJie
Copy link
Contributor Author

ShawJie commented Nov 30, 2023

通过本地的代码验证基本定位了问题在source/js/code-block.js,其中对于代码块高度超限之后设定了样式overflow = hidden,但在后续展开代码块时并没有解除这个限制,导致代码块无法横线滚动,已提交PR

处理结果:
image

@ShawJie ShawJie changed the title 当代码块内代码过长时,无法横线滚动代码块 当代码块内代码过长时,无法横向滚动代码块 Nov 30, 2023
@ShawJie ShawJie closed this as completed Dec 1, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant