首页 新闻 会员 周边

gitlab中如何修改行内代码高亮的样式

1
悬赏园豆：30 [已解决问题] 解决于 2017-03-09 11:42

gitlab默认的行内代码高亮样式实在太丑了（见下图），请问如何修改？

dudu的主页 dudu | 高人七级 | 园豆：31003
提问于：2016-04-24 16:23
< >
分享
最佳答案
1

gitlab行内代码的样式是在tw_bootstrap_variables.scss中定义的：

$code-color: #c7254e;
$code-bg: #f9f2f4;

tw_bootstrap_variables.scss的文件路径是：

/opt/gitlab/embedded/service/gitlab-rails/app/assets/stylesheets/framework/tw_bootstrap_variables.scss

修改这个样式后，要让其生效需要从源码安装gitlab，在安装时通过下面的命令生成css：

sudo -u git -H bundle exec rake assets:precompile RAILS_ENV=production

如果用的是omnibus安装包安装的，无法重新生成css，运行下面的命令

gitlab-rake assets:precompile

会报错

# gitlab-rake assets:precompile
rake aborted!
ExecJS::Error: ExecJS disabled
/opt/gitlab/embedded/bin/bundle:22:in `load'
/opt/gitlab/embedded/bin/bundle:22:in `<main>'
Tasks: TOP => assets:precompile
(See full trace by running task with --trace)
[root@git framework]# gitlab-rake assets:precompile --trace

相关链接：https://gitlab.com/help/administration/raketasks/maintenance.md

dudu | 高人七级 |园豆：31003 | 2017-03-09 11:41

后来为Omnibus版gitlab找到了一个解决方法，在 _head.html.haml 文件中添加一个css文件引用

%link{:rel => "stylesheet", :href => "css文件路径"}

注：

1）_head.html.haml 在 /opt/gitlab/embedded/service/gitlab-rails/app/views/layouts 文件夹中

2）修改后需要用 gitlab-ctl restart 命令重启gitlab

然后在这个css文件中写样式覆盖gitlab的默认样式：

code {
    color: #222;
    background-color: #f5f5f5;
    border: 1px solid #ccc!important;
    display: inline-block;
    margin: 2px 0;
} 
dudu | 园豆：31003 (高人七级) | 2017-03-09 12:22

后来 gitlab 改进了 inline 代码高亮样式，将红色微调为下面的样式，还是挺喜欢的。

code 
{ 
    color: #c0341d; 
    background-color: #fbe5e1; 
}

但是从 gitlab 12.9.0 开始，gitlab 竟然大改 inline 代码高亮样式，变成了淡灰色 #f2f2f2 ，不太喜欢，详见博问 如何修改 gitlab inline 代码高亮样式。

dudu | 园豆：31003 (高人七级) | 2020-03-30 12:45
其他回答(1)
0

看看这个：

https://alexpeattie.com/blog/better-syntax-highlighting-with-rouge

收获园豆：30
XiaoFaye | 园豆：3087 (老鸟四级) | 2016-04-24 18:23
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。