diff --git a/preview-src/example.adoc b/preview-src/example.adoc index fdf1d473..c73bb97d 100644 --- a/preview-src/example.adoc +++ b/preview-src/example.adoc @@ -132,187 +132,23 @@ neo4j@system> SHOW DATABASES; ---- ==== -== Source Blocks with title -If a title is provided to the example block, it will show up in an additional blue header above the code: +== Example block inside a list -[source,adoc] ----- -.This example has a title -[source,adoc] -Play with me! ----- - -.This example has a title -[source,adoc] -Play with me! - -== Copy Button - -The **Copy To Clipboard** button will appear on all code blocks: - -[source,adoc] ----- -[source,adoc] -Copy me! ----- - -Unless you add `role=nocopy`: - -[source,adoc,role=nocopy] ----- -[source,adoc,role=nocopy] -Don't copy me! ----- - -== Reference lines (Callouts) - -You can add number bubbles to reference specific lines by appending `` to a line. It is advised to put them behind a line comment for the language the code is in. - -[source,ruby] ----- -require 'sinatra' <1> - -get '/hi' do <2> <3> - "Hello World!" -end ----- -<1> Library import -<2> URL mapping -<3> Response block - -[source] ----- -line of code // <1> -line of code # <2> -line of code ;; <3> -line of code ----- -<1> A callout behind a line comment for C-style languages. -<2> A callout behind a line comment for Ruby, Python, Perl, etc. -<3> A callout behind a line comment for Clojure. -<4> A callout behind a line comment for XML or SGML languages like HTML. - - -== Expand code block - -Code blocks longer than 15 lines (+5 of tolerance) are collapsed, unless you add `role=nocollapse` - -[source,adoc] ----- -[source,js] -... ----- - -[source,js] ----- - // Collapse/Expand long blocks - var codeMaxLines = 15 // lines - var codeTolerance = 5 // lines - var codeLineHeight = parseFloat(window.getComputedStyle( - document.getElementsByClassName('highlight')[0], null) - .getPropertyValue('line-height')) - var codeMaxHeight = codeLineHeight*codeMaxLines - var maskImage = 'linear-gradient(to bottom, black 0px, transparent ' + - (codeMaxHeight + 100) + 'px)' - - var codeBlockLinesNum = function (code) { - var paddingTop = parseFloat(window.getComputedStyle(code, null).getPropertyValue('padding-top')) - var paddingBottom = parseFloat(window.getComputedStyle(code, null).getPropertyValue('padding-bottom')) - var height = code.clientHeight-paddingTop-paddingBottom; - var lines = Math.ceil(height / codeLineHeight) - var hiddenLines = Math.ceil(lines - codeMaxLines) - return hiddenLines - } - - var expandCollapseBlock = function (e) { - e.preventDefault() - var showMore = e.target - var pre = showMore.parentNode - var code = pre.querySelector('code') - - if (pre.style.overflow === 'hidden') { - window.sessionStorage.setItem('scrollpos', window.scrollY) - pre.style.maxHeight = pre.scrollHeight + 'px' - pre.style.overflow = 'visible' - code.style.webkitMaskImage = '' - code.style.maskImage = '' - showMore.innerHTML = '↑' // show less - } else { - // Scoll back to where you where before expanding - var scrollpos = window.sessionStorage.getItem('scrollpos') - if (scrollpos) { - window.scrollTo({ - top: scrollpos, - behavior: 'auto', - }) - } - window.sessionStorage.removeItem('scrollpos') - - var hiddenLines = codeBlockLinesNum(code) - pre.style.maxHeight = codeMaxHeight + 'px' - pre.style.overflow = 'hidden' - code.style.webkitMaskImage = maskImage - code.style.maskImage = maskImage - showMore.innerHTML = '↓ View all (' + hiddenLines + ' lines more) ↓' - } - } - - // Collapse long blocks on load - var collapseCodeBlock = function (pre) { - var dotContent = pre.parentNode - var listingBlock = dotContent.parentNode - var code = pre.querySelector('code') - - if (!listingBlock.classList.contains('nocollapse') && - pre.offsetHeight > (codeMaxLines+codeTolerance)*codeLineHeight) { - pre.style.maxHeight = codeMaxHeight + 'px' - pre.style.overflow = 'hidden' - code.style.webkitMaskImage = maskImage - code.style.maskImage = maskImage - - var hiddenLines = codeBlockLinesNum(code) - var showMore = createElement('a', 'show-more') - showMore.innerHTML = '↓ View all (' + hiddenLines + ' lines more) ↓' - showMore.addEventListener('click', expandCollapseBlock) - pre.appendChild(showMore) - } - } - - // Apply collapseCodeBlock - document.querySelectorAll('.highlight') - .forEach(collapseCodeBlock) - ----- - -[source,adoc] ----- -[source,js,role=nocollapse] -... ----- - -[source,js,role=nocollapse] ----- -// Collapse/Expand long blocks -var codeBlockMaxHeight = 300 // px -var styleMaskImage = 'linear-gradient(to bottom, black 0px, transparent ' + (codeBlockMaxHeight+100) + 'px)' - -var expandCollapseBlock = function (e) { - e.preventDefault(); - var showMore = e.target - var pre = showMore.parentNode - var codeBlock = pre.querySelector('code') - - if (pre.st.style.webkitMaskImage = styleMaskImage - codeBlock.style.maskImage = styleMaskImage - showMore.innerHTML = '↓' // show more - //codeBlock.scrollIntoView({behavior: 'smooth'}) - } -} - if (pre.st.style.webkitMaskImage = styleMaskImage - codeBlock.style.maskImage = styleMaskImage - showMore.innerHTML = '↓' // show more - //codeBlock.scrollIntoView({behavior: 'smooth'}) - } -} ----- +. List item ++ +.An Example +==== +Lorem ipsum +==== ++ +. List item +. List item +. List item ++ +.An Example +==== +Lorem ipsum +==== ++ +. List item \ No newline at end of file diff --git a/src/css/doc.css b/src/css/doc.css index 0d833d88..fb30eac7 100644 --- a/src/css/doc.css +++ b/src/css/doc.css @@ -627,8 +627,8 @@ body { margin-bottom: 0.5rem; } -.doc .olist li div:first-of-type, -.doc .ulist li div:first-of-type { +.doc .olist li > div:first-of-type, +.doc .ulist li > div:first-of-type { margin-top: 1.5rem; }