首页 新闻 搜索 专区 学院

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

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

gitlab默认的行内代码高亮样式实在太丑了(见下图),请问如何修改?

dudu的主页 dudu | 高人七级 | 园豆:38815
提问于: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 | 高人七级 |园豆:38815 | 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 | 园豆:38815 (高人七级) | 2017-03-09 12:22

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

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

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

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

看看这个:

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

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