Commit 5bced2d3 authored by Jakub Jirutka's avatar Jakub Jirutka

Highlight AsciiDoc source listings using asciidoctor-rouge

This is superior to GitLab's SyntaxHighlightFilter, because it supports
callouts and other AsciiDoc(tor) features.
parent ec521a80
Pipeline #11884601 failed with stages
in 101 minutes and 9 seconds
......@@ -126,6 +126,7 @@ gem 'wikicloth', '0.8.1'
gem 'asciidoctor', '~> 1.5.2'
gem 'asciidoctor-html5s', '= 0.1.0.beta.3'
gem 'asciidoctor-plantuml', '0.0.7'
gem 'asciidoctor-rouge', '~> 0.1.0', require: false
gem 'rouge', '~> 2.0'
gem 'truncato', '~> 0.7.9'
gem 'bootstrap_form', '~> 2.7.0'
......
......@@ -60,6 +60,9 @@ GEM
thread_safe (~> 0.3.4)
asciidoctor-plantuml (0.0.7)
asciidoctor (~> 1.5)
asciidoctor-rouge (0.1.0)
asciidoctor (~> 1.5.6)
rouge (~> 2.2)
ast (2.3.0)
atomic (1.1.99)
attr_encrypted (3.0.3)
......@@ -972,6 +975,7 @@ DEPENDENCIES
asciidoctor (~> 1.5.2)
asciidoctor-html5s (= 0.1.0.beta.3)
asciidoctor-plantuml (= 0.0.7)
asciidoctor-rouge (~> 0.1.0)
attr_encrypted (~> 3.0.0)
awesome_print (~> 1.2.0)
babosa (~> 1.0.2)
......
// Rules for asciidoctor-html5s converter.
.wiki {
@mixin black-circle-bg {
display: inline-block;
background-color: $black;
border-radius: 50%;
color: $white-light;
text-align: center;
font-size: 0.85em;
line-height: 1.4em;
height: 1.4em;
width: 1.4em;
}
.doc-section {
// This substitutes margin-top on h1-6 that is zeroed by :first-child rule.
margin-top: 24px;
......@@ -66,6 +78,13 @@
@extend .fa-angle-right;
}
// Code callout (a mark inside the code).
.code b.conum {
@include black-circle-bg;
font-weight: $gl-font-weight-normal;
font-family: $regular_font;
}
// Code callouts list, styled as numbers in black circles.
.callout-list {
counter-reset: callout-list;
......@@ -74,19 +93,11 @@
margin-bottom: $gl-padding * 1.5;
& > li:before {
display: inline-block;
background-color: $black;
border-radius: 50%;
color: $white-light;
@include black-circle-bg;
content: counter(callout-list);
counter-increment: callout-list;
text-align: center;
font-size: 0.85em;
line-height: 1.4em;
margin-left: -2em;
margin-right: 0.6em;
height: 1.4em;
width: 1.4em;
}
}
......
......@@ -6,6 +6,18 @@ module Banzai
node.set_attribute('class', 'code math js-render-math')
end
doc.search('.rouge.highlight > code').each do |code|
lang = code.attr('data-lang')
pre = code.parent
code.remove_attribute('data-lang')
code.remove_attribute('class')
pre.set_attribute('class', "code highlight js-syntax-highlight #{lang}")
pre.set_attribute('lang', lang)
pre.set_attribute('v-pre', 'true')
end
doc
end
end
......
require 'asciidoctor'
require 'asciidoctor/extensions'
require 'asciidoctor-html5s'
require "asciidoctor-plantuml"
require 'asciidoctor-plantuml'
require 'asciidoctor/rouge/treeprocessor'
module Gitlab
# Parser/renderer for the AsciiDoc format that uses Asciidoctor and filters
......@@ -10,9 +12,13 @@ module Gitlab
DEFAULT_ADOC_ATTRS = [
'showtitle', 'idprefix=user-content-', 'idseparator=-', 'env=gitlab',
'env-gitlab', 'source-highlighter=html-pipeline', 'icons=font'
'env-gitlab', 'source-highlighter=rouge', 'icons=font'
].freeze
Asciidoctor::Extensions.register do
treeprocessor Asciidoctor::Rouge::Treeprocessor.new(formatter_opts: { line_id: 'LC%i' })
end
# Public: Converts the provided Asciidoc markup into HTML.
#
# input - the source text in Asciidoc format
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment