Code block's copy button doesn't position correctly when using prismjs

maple3142 commented 4 years ago

Please follow this Issue template to provide relevant information, such as source code repository, website URL and screenshots, which will help us investigate. 请按照此 Issue 模版提供相关信息，例如源码仓库、网站链接和屏幕截图，这将有助于我们进行调查。

Issue Checklist

[x] I am using the latest version of NexT.
[x] I have already read the Troubleshooting page of Hexo and Troubleshooting page of NexT.
[x] I have already searched for current issues, which does not help me.

Expected behavior

Works correctly when using prismjs

Actual behavior

Links to demo site with this issue:
Links to repository or source code of the blog:
Screenshots: Using highlight.js: Using prismjs:

Steps to reproduce the behavior

Disable highlight js in _config.yml, and enable prismjs, then hexo clean && hexo s.

Environment Information

Node.js and NPM Information

node v12.18.3
npm 6.14.6

Package dependencies Information

Hexo Configuration

├── graceful-fs@4.2.4
├── gulp@4.0.2
├── gulp-csso@4.0.1
├── gulp-dom@1.0.0
├── gulp-htmlclean@2.7.22
├── gulp-htmlmin@5.0.1
├── gulp-imagemin@7.1.0
├── gulp-pretty-data@0.2.0
├── gulp-terser@1.4.0
├── hexo@5.1.1
├── hexo-filter-mathjax@0.6.0
├── hexo-fs@3.1.0
├── hexo-generator-archive@1.0.0
├── hexo-generator-category@1.0.0
├── hexo-generator-feed@3.0.0
├── hexo-generator-index@2.0.0
├── hexo-generator-restful@0.2.3
├── hexo-generator-robotstxt@0.2.0
├── hexo-generator-search@2.4.0
├── hexo-generator-sitemap@2.1.0
├── hexo-generator-tag@1.0.0
├── hexo-related-popular-posts@5.0.0
├── hexo-renderer-ejs@1.0.0
├── hexo-renderer-marked@3.1.0
├── hexo-renderer-stylus@2.0.0
├── hexo-server@2.0.0
├── hexo-util@2.4.0
├── httpsrv@0.3.2
├── jsdom@16.4.0
├── minimatch@3.0.4
└── nunjucks@3.2.2

NexT Configuration

rss: /atom.xml
footer:
  since: 2017
  icon:
    name: fa fa-user
    animated: false
    color: "#808080"
  copyright: null
  powered: false
  theme:
    enable: false
    version: false
favicon:
  small: /favicon.ico
  medium: /favicon.ico
  apple_touch_icon: /favicon.ico
  safari_pinned_tab: /favicon.ico
canonical: true
menu:
  home: / || fas fa-home
  about: /about/ || fas fa-user
  tags: /tags/ || fas fa-tags
  categories: /categories/ || fas fa-th
  archives: /archives/ || fas fa-archive
back2top:
  enable: true
  sidebar: false
  scrollpercent: true
scheme: Pisces
social:
  GitHub: //github.com/maple3142 || fab fa-github
  E-Mail: mailto:kirby741852963@gmail.com || fa fa-envelope
  Twitter: //twitter.com/maple3142 || fab fa-twitter
  Telegram: //t.me/maple3142 || fab fa-telegram
  RSS: /atom.xml || fas fa-rss
social_icons:
  enable: true
  icons_only: true
avatar:
  url: /img/maple3142.jpg
font:
  enable: true
  global:
    external: false
    family: Arial
    size:
  codes:
    external: false
    family: monospace
disqus:
  enable: true
  shortname: maple3142
  count: false
  lazyload: true
google_site_verification: ebMkYF0f5RX6bDiatwVeIUTBEfOrg886kYf_tk_gnS4
local_search:
  enable: true
  trigger: auto
  top_n_per_article: 1
  unescape: false
  preload: false
motion:
  enable: false
vendors:
  fontawesome: //cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css
  mediumzoom: //cdnjs.cloudflare.com/ajax/libs/medium-zoom/1.0.6/medium-zoom.min.js
related_posts:
  enable: true
custom_file_path:
  head: source/_data/head.njk
codeblock:
  copy_button:
    enable: true
    show_result: true
    style: flat
post_meta:
  item_text: true
  created_at: true
  updated_at:
    enable: false
  categories: true
scroll_to_more: false
reading_progress:
  enable: true
  color: "#37c6c0"
  height: 2px
# I use my own implementation
google_analytics:
  tracking_id: UA-108821694-2
  only_pageview: true
mediumzoom: true
text_align:
  desktop: left
  mobile: left

Other Information

Browser: Chrome 80.0.3987.163

welcome[bot] commented 4 years ago

Thanks for opening this issue, maintainers will get back to you as soon as possible!

issue-label-bot[bot] commented 4 years ago

Issue-Label Bot is automatically applying the label Bug to this issue, with a confidence of 0.70. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

ljcbaby commented 3 years ago

I tested it in the latest version and reproduced the problem.

jiangtj commented 3 years ago

Maybe need to adjust the layout

original

<pre>
  <code></code>
  <div class="copy-btn"></div>
</pre>

change to

<div class=""wrapper">
  <pre>
    <code></code>
  </pre>
  <div class="copy-btn"></div>
</div>

ljcbaby commented 3 years ago

Prism 的问题似乎最好配合 Hexo 那边解决在解析 md 的时候把高亮的代码块包起来我想通过这样统一一下 highlight 和 prism 处理后的文档整体结构，使代码高亮部分可以统一通过某选择器选择这样子

MHuiG commented 3 years ago

我前几天遇到了相同的问题, 你只需要添加这样几行

https://github.com/volantis-x/hexo-theme-volantis/blob/164b67ed90c7915a1afbc6f652e0ab8ac334005d/layout/_plugins/highlight/prismjs/script.ejs#L13-L19

https://volantis-x.js.org/test/code-highlight/

stevenjoezhang commented 2 years ago

相似问题 https://github.com/fan-lv/Fan/issues/23

stevenjoezhang commented 1 year ago

Fixed in https://github.com/next-theme/hexo-theme-next/commit/c596155ef956def01a4a739faab6ef16d26ffb36

github-actions[bot] commented 2 months ago

This thread has been automatically locked since there has not been any recent activity after it was closed. It is possible issue was solved or at least outdated. Feel free to open new for related bugs.

next-theme / hexo-theme-next