How do I render a strikethrough (or line-through) in an adoc file?
Let's presume I want to write "That technology is -c-r-a-p- not perfect."
That technology is [line-through]#crap# not perfect.
As per Ascii Doc manual, [line-through] is deprecated. You can test here.
Comment from Dan Allen
It's important to understand that line-through is just a CSS role. Therefore, it needs support from the stylesheet in order to appear as though it is working.
If I run the following through Asciidoctor (or Asciidoctor.js):
[.line-through]#strike#
I get:
<span class="line-through">strike</span>
The default stylesheet has a rule for this:
.line-through{text-decoration:line-through}
You would need to do the same.
It is possible to customize the HTML that is generated using custom templates (Asciidoctor.js supports Jade templates). In that case, you'd override the template for inline_quoted, check for the line-through role and produce either an <s> or, preferably, a <del> instead of the span.
If you're only targeting the HTML backend, you can insert HTML code verbatim via a passthrough context. This can be done inline by wrapping the parts in +++:
That technology is +++<del>+++crap+++</del>+++ not perfect.
This won't help you for PDF, DocBook XML, or other output formats, though.
If the output is intended for HTML you can pass HTML.
The <s> HTML element renders text with a strikethrough, or a line
through it. Use the element to represent things that are no longer
relevant or no longer accurate.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s
To render as:
Example text.
use:
1. Pass inline:
Example +++<s>text</s>+++.
2. Pass-through macro:
Example pass:[<s>text</s>].
3. Pass block:
++++
Example <s>text</s>.
++++
Related
I'm using Pandoc to generate a Reveal.js presentation. It includes code in fenced code blocks, like this:
```java
// Some Java code
```
Reveal.js supports a way to add a highlight to a specific line or range of lines, with the data-line-numbers="1" attribute that should be added to the <code> tag.
I've tried to add this attribute to the fenced code block in various ways, such as this
``` { .java data-line-numbers="1" }
// Some Java code
```
But I can't get it to work. Is there a way to use Reveal.js's data-line-numbers in Pandoc? Or perhaps Pandoc has a way to achieve something similar? Or do I need to give up and just use those messy <pre><code> HTML tags in my Markdown?
The correct syntax should be:
``` {.java .number-lines}
// Some Java code
```
Pandoc does the syntax-highlighting itself, and is sensitive to the number-lines class.
Pandoc's HTML output for code blocks does not follow the way that reveal.js expects them to be written. E.g., the default pandoc way of indicating that lines are to be numbered is to mark the block with the number-lines class, while reveal.js expects a boolean data-line-numbers attribute. Even adding the data-line-numbers attribute manually won't work: pandoc wraps the code in <pre> and <code> elements and adds all code block attributes to the <code> element, while reveal.js looks for them in the <pre> element.
I struggled with pandoc's way of handling code blocks for reveal.js output myself, so I wrote this lua-filter: revealjs-codeblock. This filter adjusts pandoc's HTML output such that it follows the reveal.js specs.
It supports the .number-lines and .numberLines classes as well as the data-line-numbers attribute.
On the main page of every repository in GitHub or BitBucket it shows the Readme.md in a very pretty format.
Is there a way to make the same thing with ruby? I have already found some gems like Redcarpet, but it never looks pretty. I've followed this instructions for Redcarpet.
Edit:
After I tried Github's markup ruby gem, the same thing is happening.
What is shown is this:
And what I want is this:
And I'm sure it's not only css missing, because after 3 backquotes (```) I write the syntax like json or bash and in the first image it is written.
Edit2:
This code here:
renderer = Redcarpet::Render::HTML.new(prettify: true)
markdown = Redcarpet::Markdown.new(renderer, fenced_code_blocks: true)
html = markdown.render(source_text)
'<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>'+html
Generated this:
Github provides its own ruby gem to do so: https://github.com/github/markup.
You just need to install the right dependencies and you're good to go.
You need to enable a few nonstandard features.
Fenced code blocks
Fenced code blocks are nonstandard and are not enabled by default on most Markdown parsers (some older ones don't support them at all). According to Redcarpet's docs, you want to enable the fenced_code_blocks extension:
:fenced_code_blocks: parse fenced code blocks, PHP-Markdown style. Blocks delimited with 3 or more ~ or backticks will be considered as code, without the need to be indented. An optional language name may be added at the end of the opening fence for the code block.
Syntax Highlighting
Most Markdown parsers to not do syntax highlighting of code blocks. And those that do always do it as an option. Even then, you will still need to provide your own CSS styles to have the code blocks styled properly. As it turns out, Redcarpet does include support for a prettify option to the HTML renderer:
:prettify: add prettyprint classes to <code> tags for google-code-prettify.
You will need to get the Javascript and CSS from the google-code-prettify project to include in your pages.
Solution
In the end you'll need something like this:
renderer = Redcarpet::Render::HTML.new(prettify: true)
markdown = Redcarpet::Markdown.new(renderer, fenced_code_blocks: true)
html = markdown.render(source_text)
As #yoones said Github shares their way to do it but to be more precise they use the gem "commonmarker" for markdown. Though as far as I can tell this thing does not give the full formatted HTML file but only a piece that you insert into <body>. So you can do it like I did:
require "commonmarker"
puts <<~HEREDOC
<!DOCTYPE html>
<html>
<head>
<style>#{File.read "markdown.css"}</style>
</head>
<body class="markdown-body Box-body">
#{CommonMarker.render_html ARGF.read, %i{ DEFAULT UNSAFE }, %i{ table }}
</body>
</html>
HEREDOC
Where did I get the markdown.css? I just stole the CSS files from an arbitrary Github page with README rendered and applied UNCSS to it -- resulted in a 26kb file, you can find it in the same repo I just linked.
Why the table and UNSAFE? I need this to render an index.html for Github Pages because their markdown renderer can't newlines within table cells, etc. so instead of asking it to render my README.md I make the index.html myself.
I use org.asciidoctor.convert plugin for gradle to generate API documentation for my team. I include files:
include::{snippets}/index/curl-request.adoc[]
and want to place it's content into spoiler or anything like that. Is there any way to somehow hide dynamicaly asciidoc elements? I try to use
pass:[<details open>
include::{snippets}/index/curl-request.adoc[]
</details>]
but it is not processed include inside it. Any ideas will be higly appreciated. Without hiding snippets my documentation have almost unlimited scrol :). If no such way with ascii doc, suggestions of other documentation formats, where i can include files content and place it into the spoiler is also appreciated.
As this was so helpful for me - I added here the solution from Robin's comment.
No CSS and Javascript needed!
Here is an example:
+++ <details><summary> +++
Check `reference.conf`:
+++ </summary><div> +++
----
play {
http {
secret.key = asdf
secret.key = ${?SECRET_KEY}
...
}
...
}
----
+++ </div></details> +++
This creates a collapsed element:
..and this expanded image:
Update
As Foad's answer looks more elegant, I tried his proposed solution for a ReDoc Markup with no success.
As Guillaume Grossetie has mentioned here
Using passthrough to include raw HTML is not recommended because now your document is tightly coupled with the output.
and it is deprecated. The new syntax for collapsible/foldable sections is
.some description
[%collapsible]
====
this
is
going
to be
folded
====
This is a late answer but maybe it will help you/others.
The following asciidoc features are the key for implementing dynamic showing/hiding of blocks:
If your output is only HTML then you can embed any HTML in the document using
++++ any HTML contents ++++
This includes
<style> tags containing custom CSS classes
custom HTML tags for show/hide functionality like <input type="checkbox" />
<script> tags containing Javascript code to hide/show some blocks, e.g. by adding event listeners to checkboxes.
As #LightGuard has already mentioned, role attributes are converted to CSS class references. E.g.
[source,role="someCssClass"]
----
...
----
is converted to something like
<div class="someCssClass">
</div>
So you can reference this CSS class from Javascript code and implement show/hide by modifying the display CSS attribute.
For a simple example implementation see https://raw.githubusercontent.com/NorbertSandor/jsinterop.xyz/master/jsinterop-project/jsinterop-website/src/main/asciidoc/index.asciidoc (near the top of the file).
I'm working in a front end for the GSA, but I can't see how to style it.
Can anyone tell me if it is possible to use classes or the styling should be done inline on html tags?
You can either inline the CSS in the XSLT or host it on another webserver and reference it from within the XSLT as you would a normal HTML document.
Assuming you're outputting HTML from your XSLT then once you sort out where to put the CSS you just style it like any other HTML document.
I'm trying to change the style of a blog post (for instance change the title color), based on the labels associated to the post.
I'm a bit new to the templating, so I though I would be going to add a class with the label in the title <h3> element, and then add my CSS rules.
So I found this which would generate a proper list of labels separated by a space:
<b:loop values='data:post.labels' var='label'><data:label.name/> </b:loop>
However, it seems the validator does not let me add this inside the class attribute as follow:
<h3 class='post-title entry-title <b:loop values="data:post.labels" var="label"><data:label.name/> </b:loop>'>
From there, I found half the solution. Apparently, I should use expr:class instead of class as follow:
<h3 expr:class='"post-title entry-title " + data:list_of_labels'>
So now:
- How can I build this variable data:list_of_labels? (basically how to set a variable)
- Is there a full description of the template syntax somewhere?
- Is there another way to go around this?
Thanks,
JB
This should do it. Using XML entities allows you bypass the XML validation and move the Blogger functions to where you need them. Longer explanation here: http://www.karlhorky.com/2012/06/add-blogger-labels-to-post-as-css.html
<div class="post<b:if cond="data:post.labels"><b:loop values="data:post.labels" var="label"> <data:label.name></data:label.name></b:loop></b:if>">
<data:post.body>
</div>
There is no way to set variables in the blogger data xml, however you can set variables using javascript.
There are many pages on the blogger data xml. Google is your friend. For example this one.
You are on the right track: do a loop, use javascript to check for the combinations you want, change the style properties or load a css file dynamically.