search

volantis-x / hexo-theme-volantis

A Wonderful Theme for Hexo.
https://volantis.js.org
MIT License
2.04k stars 600 forks source link

code代码块渲染，首字符不对齐 #151

Closed TianZonglin closed 4 years ago

TianZonglin commented 4 years ago

描述

code代码块渲染，首字符不对齐。

所谓的code代码块是

重现

网址：https://www.cz5h.com/article/2017-10-15%20Python%E7%9A%84%E6%8E%A7%E5%88%B6%E6%B5%81.html 截图：

xaoxuu commented 4 years ago

请发一下以下文件：

你发的两个截图不对应，无法判断

TianZonglin commented 4 years ago

根目录配置

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: CZ5H's BLOG
subtitle: '====='
description: ''
keywords:
author: Tzloop
language: zh-CN
timezone: ''

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://www.cz5h.com
root: /
permalink: article/:title.html
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 9
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## Use post's date for updated date unless set in front-matter
use_date_for_updated: false

# Pagination
## Set per_page to 0 to disable pagination
per_page: 9
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: volantis

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  #repo: git@github.com:TianZonglin/Nerv.git
  repo: git@e.coding.net:TESTTYPE-EVA01/Nerv.git
  branch: master

# 自动生成sitemap
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

leancloud:
  app_id: ===============
  app_key: =====================

主题配置

############################### 主题基本信息 ###############################
info:
  name: 长征五号
  version: 1.6
  docs: https://zh.wikipedia.org/wiki/User:Zonelyn
  cdn: # 要使用CDN，请在根目录的config文件中写上 use_cdn: true  默认是不适用的！！！！！
    css:
      style: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@20.2.39/css/style.css
    js:
      app: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@20.2.39/js/app.js
      search: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@20.2.39/js/search.js
      valine: https://cdn.jsdelivr.net/gh/TianZonglin/tuchuang/valine.js

############################### 第三方插件 ###############################
# ⚠️ 注意：开启过多服务会导致网页加载缓慢、运行卡顿
plugins:
  # jquery是很多功能的基础，请勿关闭
  jquery: '//cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js'
  ################################################## 提升速度类的服务
  # 鼠标放在链接上就提前开始加载了 [站内的url一定要以‘/’结尾]
  instant_page: 'https://instant.page/3.0.0'
  ################################################## 优化体验类的服务
  # 图片放大预览
  fancybox:
    css: '//cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css'
    js: '//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js'
  # 页面滚动显示动画
  # scrollreveal: '//cdn.jsdelivr.net/npm/scrollreveal@4.0.5/dist/scrollreveal.min.js'
  # 代码块复制按钮
  # clipboard: '//cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js'
  ################################################## 运维服务
  # 访问量统计【加载非常缓慢】
  busuanzi: '//cdn.jsdelivr.net/gh/xaoxuu/cdn-busuanzi@2.3/js/busuanzi.pure.mini.js'
  # 文章字数统计、阅读时长，开启需要安装插件: npm i --save hexo-wordcount
  wordcount: true
  ################################################## 美化类的服务
  # 按钮点击涟漪效果
  # nodewaves:
  #   css: '//cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.css'
  #   js: '//cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.js'
  # 文本框打字机特效
  comment_typing: '//cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@20.2.39/js/comment_typing.js'

############################### 主题样式 ###############################
# 样式
style:
  # 卡片阴影效果
  shadow:
    # 导航栏阴影
    nav: true
    # 卡片阴影和悬浮动画
    # card: true
  # 毛玻璃效果 具体效果调整在： source/less/_color.less
  blur:
    navbar: true
    widget: true
    # body: true
# 建议：
#   有背景图：开启毛玻璃，关闭卡片阴影
#   无背景图：关闭毛玻璃，开启卡片阴影

# 显示「阅读全文」按钮
readmore: true

# 幻灯片背景
backstretch:
  enable: true          # 是否启用
  js: '//cdn.jsdelivr.net/npm/jquery-backstretch@2.1.18/jquery.backstretch.min.js'
  position: fixed       # cover: 封面背景   fixed: 整个网页背景
  duration: 100000000       # 持续时间（毫秒）
  fade: 100            # 渐变（毫秒）
  is_dark: #true        # 图片是否是暗色的（调整文字为白色）
  images:               # 我上传了一些高清壁纸到CDN中，仅限个人使用，商用后果自负！！！
    - https://i.loli.net/2020/02/08/dNJyR4LHtarTqPu.jpg

############################### 自定义 ###############################
# page的封面
cover:
  scheme: search    # 后期将会提供多种封面布局方案
  height: full      # full: 首页封面占据整个第一屏幕，其他页面占半个屏幕高度， half: 所有页面都封面都只占半个屏幕高度
  title: CZ5H's BLOG
  subtitle: '不 顾 一 切 的 飞 向 那 遥 远 深  邃 的 黑 暗 太 空'
  logo: # assets/logo.png    # logo和title只显示一个，若同时设置，则只显示logo
  search: '你想了解什么呢？'
  # 主页封面菜单
  #features:
  #  - name: 公告
  #    icon: fas fa-bullhorn
  #    url: /
  #  - name: 文档
  #    icon: fas fa-book
  #    url: getting-started/
  #  - name: 示例
  #    icon: fas fa-play-circle
  #    url: examples/
  #  - name: 源码
  #    icon: fas fa-code-branch
  #    url: https://github.com/xaoxuu/hexo-theme-material-x/
  #    rel: external nofollow noopener noreferrer
  #    target: _blank
  #  - name: 鸣谢
  #    icon: fas fa-handshake
  #    url: contributors/

# 导航栏
navbar:
  # 左侧logo区
  logo:
    # 显示图片，使用图片时将不会显示icon和title
    img: 
    # 显示图标
    icon: /favicon.ico
    # 显示标题
    title: <b>长征五号</b>
  # logo后面的导航菜单
  menu:
    # 在桌面端显示的导航菜单
    on_desktop:
      - name: 主页
        icon: fas fa-flag
        url: /
      - name: 归档
        icon: fas fa-globe-asia
        url: /archives
      - name: 日志
        icon: fas fa-palette
        url: /other/page_log.html
      - name: 访问旧版
        icon: fas fa-globe-asia
        url: https://old.cz5h.com
    # 手机端导航菜单（从右上角的按钮点击展开）
    on_mobile:
      - name: 主页
        icon: fas fa-flag
        url: /
      - name: 归档
        icon: fas fa-globe-asia
        url: /archives
      - name: 日志
        icon: fas fa-palette
        url: /other/page_log.html
      - name: 旧版
        icon: fas fa-globe-asia
        url: https://old.cz5h.com
  search: 搜索Anything   # 搜索框文字

# 布局
layout:
  # 文章列表多列布局
  multiple_columns: false # 部分浏览器不兼容，谨慎使用
  # 文章列表（主页、自定义的列表）布局
  on_list:
    # 列表中每一篇文章的meta信息
    meta: [title, author, date, top]
    # 列表类页面的侧边栏
    sidebar: [blogger, navigation, repos, qrcode, category, tagcloud]
  # 文章页面布局
  on_page:
    # 文章页面主体元素，你也可以在页面的Front-matter中设置
    body: [article, comments]
    # 默认的meta信息，文章中没有配置则按照这里的配置来显示，设置为false则不显示
    # 其中，title只在header中有效，music和thumbnail无需在这里设置，文章中有则显示
    # 如果tags放置在meta.header中，那么在post列表中不显示（因为卡片下方已经有了）
    meta:
      header: [title, author, category, date, top]
      footer: [links, tags]
    # 文章页脚，自动在每一篇文章末尾添加
    footer: [related_posts, copyright] #[copyright, qrcode]
    # 文章页面的侧边栏
    sidebar: [blogger, navigation, repos, qrcode, toc]
  # 其他的页面布局暂时等于文章列表

# meta库配置
meta:
  # 文章标题
  title: # 暂无配置
  # 文章作者
  author:
    icon: fas fa-user # 如果配置了头像，则不会显示图标
  # 文章创建日期
  date:
    icon: fas fa-edit
    title: '文章发布于：'
    format: 'll' # 日期格式 http://momentjs.com/docs/
  # 文章更新日期
  updated:
    icon: fas fa-save
    title: '本页文档最后更新于：'
    format: 'll' # 日期格式 http://momentjs.com/docs/
  # 文章分类
  category:
    icon: fas fa-folder-open
  # 文章置顶
  top:
    icon: fas fa-angle-double-up
  # 文章浏览计数
  counter:
    icon: fas fa-eye
  # 文章字数和阅读时长
  wordcount:
    icon_wordcount: fas fa-keyboard
    icon_duration: fas fa-hourglass-half
  # 文章标签
  tags:
    icon: fas fa-tag
  # 分享
  share:
    - id: qq
      name: QQ好友
      img: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/logo/128/qq.png
    - id: qzone
      name: QQ空间
      img: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/logo/128/qzone.png
    # - id: qrcode # 当id为qrcode时需要安装插件  npm i -S hexo-helper-qrcode
    #   name: 微信
    #   img: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/logo/128/wechat.png
    - id: weibo
      name: 微博
      img: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/logo/128/weibo.png
    # - id: qrcode # 当id为qrcode时需要安装插件  npm i -S hexo-helper-qrcode
    #   name: QRcode
    #   img: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/logo/128/qrcode.png
  # 链接
  #links:
  #  repo: # 源码链接
  #    icon: fas fa-code-branch
  #    title: 源码
  #    color: '#508EF2'
  #  bug: # BUG反馈链接
  #    icon: fas fa-bug
  #    title: BUG
  #    color: '#FE5F58'
  #  doubt: # 疑问链接
  #    icon: fas fa-question-circle
  #    title: 疑问
  #    color: '#FFBD2B'
  #  idea: # 建议链接
  #    icon: fas fa-lightbulb
  #    title: 建议
  #    color: '#3DC550'
  #  faq: # FAQ链接
  #    icon: fas fa-comments
  #    title: FAQ
  #    color: '#29B1C9'
  #  feedback: # 反馈链接
  #    icon: fas fa-comment-dots
  #    title: 反馈
  #    color: '#1BCDFC'

# 组件库配置
widget:
  # ---------------------------------------
  # 博主信息小部件配置
  - id: blogger
    class: blogger
    display: [desktop] # [desktop, mobile]
    avatar: https://cdn.jsdelivr.net/gh/TianZonglin/tuchuang/img/cfcg.png
    # title:  标题
    # subtitle: 副标题
    jinrishici: false # 今日诗词。可以设置字符串，加载失败时会显示占位字符串。
    social: false
  # ---------------------------------------
  # 目录小部件配置(仅在文章中有效)
  - id: toc
    class: toc
    display: [desktop, mobile] # [desktop, mobile]
    header:
      icon: fas fa-list
      title: 本文目录
    list_number: false # 是否显示章节
    min_depth: 2 # H1建议用作网页或者文章的标题，章节从H2开始。
    max_depth: 5 # 由于宽度有限，主题没有针对所有层级进行布局优化，建议文章最多分为：H2/H3/H4/H5四个层级
  # ---------------------------------------
  # 文章分类小部件配置
  - id: category
    class: category
    display: [desktop] # [desktop, mobile]
    header:
      icon: fas fa-folder-open
      title: 文章分类
      url: /blog/categories/
  # ---------------------------------------
  # 标签云小部件配置
  - id: tagcloud
    class: tagcloud
    display: [desktop] # [desktop, mobile]
    header:
      icon: fas fa-tags
      title: 文章标签
      url: /blog/tags/
    min_font: 5
    max_font: 20
    color: true
    start_color: '#999'
    end_color: '#555'
  # ---------------------------------------
  # 相关文章小部件配置
  - id: related_posts
    class: related_posts # 需要安装插件  npm i -S hexo-related-popular-posts
    display: [desktop, mobile] # [desktop, mobile]
    header:
      icon: fas fa-bookmark
      title: 相关文章
  # ---------------------------------------
  # 版权说明小部件（仅用于文章中）
  - id: copyright
    class: copyright
    display: [desktop, mobile] # [desktop, mobile]
    blockquote: true # 是否把内容放到blockquote中
    permalink: '<b>本文永久链接是：</b>' # 显示文章永久链接
    content:
      - '<b>转载请注明出处。</b><br>博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议'
      - ''
      - permalink
  # ---------------------------------------
  # 二维码小部件（可用于文章中的打赏，只显示图片，无其他功能）
  - id: qrcode
    class: qrcode
    display: [desktop] # [desktop, mobile]
    header:
      icon: fas fa-globe-asia
      title: 全球访问
  #  height: #64px  # 不设置则自动高度
  #  fancybox: #true # 是否允许点击放大
  #  images:
  #    - https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/wiki_volantis.png
  # ---------------------------------------
  # ---------------------------------------
  # ---------------------------------------
  # 自定义组件，仿照如下写法
  - id: navigation
    class: grid
    display: [desktop, mobile] # [desktop, mobile]
    header:
      icon: fas fa-map-signs
      title: 文档导航
    rows:
      - name: 去往主页
        icon: fas fa-bullhorn
        url: /
      - name: 文章归档
        icon: fas fa-file-archive
        url: /archives
      - name: 更新日志
        icon: fas fa-play-circle
        url: /other/page_log.html
      - name: 旧版博客
        icon: fas fa-clipboard-list
        url: https://old.cz5h.com
        rel: external nofollow noopener noreferrer
        target: _blank
  - id: repos
    class: text
    display: [desktop] # [desktop, mobile]
    header:
      icon: fas fa-comments
      title: 友情链接
      url: /friends/index.html
#    content:
#      - '您的赞对我来说很重要，如果您喜欢本主题，希望能够给下面的项目点个赞来支持一下。'
#      - '[<img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/prohud/logo.png" height="50px">](https://github.com/xaoxuu/ProHUD)'
#      - '[<img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/valuex/logo.png" height="50px">](https://github.com/xaoxuu/ValueX)'
#      - '[<img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/inspire/logo.png" height="50px">](https://github.com/xaoxuu/Inspire)'

sitemap:
    path: sitemap.xml

# 社交信息配置
social:
  - icon: fab fa-github
    url: https://github.com/TianZonglin
  - icon: fab fa-github
    url: https://github.com/TianZonglin
  - icon: fas fa-rss
    url: atom.xml
  - icon: fas fa-envelope
    url: mailto:1805984583@qq.com
  - icon: fab fa-github
    url: https://github.com/TianZonglin
  - icon: fab fa-github
    url: https://github.com/TianZonglin

# APlayer配置 https://github.com/metowolf/MetingJS
aplayer:
  # 是否启用，注释此项则不加载服务
  # enable: true
  # 必选参数
  server: netease   # netease, tencent, kugou, xiami, baidu
  type: playlist    # song, playlist, album, search, artist
  id: 3175833810    # song id / playlist id / album id / search keyword
  # 可选参数
  fixed: false      # enable fixed mode
  theme: '#1BCDFC'  # main color
  autoplay: false   # audio autoplay
  order: list       # player play order, values: 'list', 'random'
  loop: all         # player loop play, values: 'all', 'one', 'none'
  volume: 0.7       # default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
  list_max_height: 340px # list max height
  list_folded: true

############################### 需要复制到根目录配置文件中 ###############################
# 请复制到根目录配置文件！
# copyright: '[Copyright © 2017-2020 Mr. X](https://xaoxuu.com)'

############################### 评论系统 ###############################
# disqus_shortname: 要使用哪个请复制到根目录配置文件！
# livere_uid: 要使用哪个请复制到根目录配置文件！
# gitalk: 要使用哪个请复制到根目录配置文件！
#   clientID: 你的clientID
#   clientSecret: 你的clientSecret
#   repo: 你的repo名
#   owner: 你的GitHub名
#   admin: [] 至少填写你的GitHub名
# leancloud: 要使用哪个请复制到根目录配置文件！
#   app_id: 你的appId
#   app_key: 你的appKey

############################### 杂项，请勿删除 ###############################
#valine配置
valine:
  enable: true # 如果你想用Valine评论系统，请设置enable为true
  volantis: true # 是否启用volantis版本（禁止匿名，增加若干贴吧、QQ表情）
  # 还需要在根目录配置文件中添加下面这三行内容
  # leancloud:
  #   app_id: 你的appId
  #   app_key: 你的appKey
  guest_info: nick,mail,link #valine comment header info
  placeholder: 快来评论吧~ # valine comment input placeholder(like: Please leave your footprints )
  avatar: mp # gravatar style https://valine.js.org/avatar
  pageSize: 5 # comment list page size
  verify: true # valine verify code (true/false)
  notify: true # valine mail notify (true/false)
  lang: zh-cn
  highlight: true

# 搜索配置
search:
  enable: true
  service: hexo    # 类型：google, algolia, azure, baidu 默认 hexo
# 选择你选取的搜索服务后，复制相应的配置到根目录配置文件中
# google:
#   apiKey:
#   engineId:
# algolia:
#   applicationID:
#   apiKey:
#   indexName:
# azure:
#   serviceName:
#   indexName:
#   queryKey:
# baidu:
#   apiId:

# Less渲染
less:
  compress: true

package.json

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": "4.2.0"
  },
  "dependencies": {
    "hexo": "^4.0.0",
    "hexo-deployer-git": "^2.1.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-baidu-sitemap": "^0.1.6",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-index": "^1.0.0",
    "hexo-generator-json-content": "^4.1.6",
    "hexo-generator-search": "^2.4.0",
    "hexo-generator-seo-friendly-sitemap": "0.0.25",
    "hexo-generator-sitemap": "^2.0.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-related-popular-posts": "^4.0.0",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-less": "^1.0.0",
    "hexo-renderer-marked": "^2.0.0",
    "hexo-renderer-stylus": "^1.1.0",
    "hexo-server": "^1.0.0",
    "hexo-wordcount": "^6.0.1"
  }
}

Markdown源文件

https://gist.github.com/TianZonglin/169ece232e38bb4db7b7b1deb6de560c

复现地址

https://www.cz5h.com/article/2017-10-15%20Python%E7%9A%84%E6%8E%A7%E5%88%B6%E6%B5%81.html

xaoxuu commented 4 years ago

根目录配置文件找到：

tab_replace: ''

替换为：

tab_replace: '    '

试试看行不行？

TianZonglin commented 4 years ago

好像没有用。。 image

TianZonglin commented 4 years ago

我是在下面找到的这个字段， highlight: enable: true line_number: true auto_detect: false tab_replace: ' ' wrap: true hljs: false

但这个异常样式不是 highlight 吧。。

TianZonglin commented 4 years ago

image

.article code {
    font-family: Menlo,Monaco,courier,monospace,"Lucida Console",'Source Code Pro',"Microsoft YaHei",Helvetica,Arial,sans-serif,'Ubuntu';
    padding: 3px 3px 0px 3px;
    margin-left: -5px;
    vertical-align: center;
    border-radius: 2px;
    border: 1px solid rgba(255,248,240,0.2);
    font-size: 14px;
    color: #6b3b00;
}

我把margin: 0 1px;改成margin-left: -5px;就对正了。。 但有没有什么影响呢

xaoxuu commented 4 years ago

肯定会有影响的，那个 code 对应的是一句话中的代码，如同这一句话。

xaoxuu commented 4 years ago

我好像是没有处理你这种tab缩进的代码块，等我后期版本更新一下。

xaoxuu commented 4 years ago

master最新代码，你更新一下看看

TianZonglin commented 4 years ago

好的

TianZonglin commented 4 years ago

image

wow，现在是改成代码段落的样式了呀，基本看不出来了，可以接受。