From e03483d8eda6f9ecc0d0b9b3c75fc77a99def32b Mon Sep 17 00:00:00 2001 From: Alyssa Ross Date: Wed, 7 Sep 2022 05:15:05 +0000 Subject: [PATCH] Improve display of AsciiDoc examples with titles (#944) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The jekyll-asciidoc plugin will take AsciiDoc markup like this: .A method that returns the string "Hello, world" [example] [source,ruby] ---- def hello "Hello, world" end ---- And produce HTML like this (syntax highlighting disabled):
A method that returns the string "Hello, world"
def hello
	  "Hello, world"
	end
Previously, because we were applying code block styling to the whole listingblock, the title would be rendered as normal body text, inside the code block, which did not look good. With this change, it will instead be rendered similarly to a Just The Docs rendered example — the title will appear where the rendered example usually would. Co-authored-by: Matt Wang --- _sass/code.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/_sass/code.scss b/_sass/code.scss index acbade5..384ef97 100644 --- a/_sass/code.scss +++ b/_sass/code.scss @@ -48,7 +48,7 @@ a:visited code { // ```[LANG]...``` div.highlighter-rouge, -div.listingblock { +div.listingblock > div.content { padding: $sp-3; margin-top: 0; margin-bottom: $sp-3; @@ -119,7 +119,8 @@ figure.highlight { // Code examples (rendered) // -.code-example { +.code-example, +.listingblock > .title { padding: $sp-3; margin-bottom: $sp-3; overflow: auto; @@ -128,6 +129,7 @@ figure.highlight { + .highlighter-rouge, + .sectionbody .listingblock, + + .content, + figure.highlight { position: relative; margin-top: -$sp-4;