asciidoctor / asciidoctor-backends Goto Github PK
View Code? Open in Web Editor NEWBackends (i.e., templates) for Asciidoctor, a Ruby port of AsciiDoc.
Home Page: http://asciidoctor.org
License: Other
Backends (i.e., templates) for Asciidoctor, a Ruby port of AsciiDoc.
Home Page: http://asciidoctor.org
License: Other
The slim backend (document.html.slim) manages stylesheet attribute to include "third party" theme
Example coming from the doc : http://asciidoctor.org/docs/user-manual/#applying-a-theme
:stylesheet: mystyles.css
We should provide such capability for javascript too
:script: myjavascript.js
Rendered into :
<script type='text/javascript' src='myjavascript.js'></script>
Do we have / support HAML Form Tag like this one - https://github.com/padrino/padrino-framework/blob/master/padrino-helpers/test/fixtures/markup_app/views/form_tag.haml as we need it for deckjs and perhaps others backends ?
A new backend for https://github.com/gnab/remark would be awesome.
Is there any contribution guide for backends? If might be fun to try to contribute in some way. :-)
/cc @gnab
Needs general usage instructions and descriptions added
How to create a custom backend
How to modify a backend
Links or references to stylesheet docs
Hi @mojavelinux,
I tried fixing the issue you highlighted in #54 regarding breaking the config with: https://github.com/obilodeau/asciidoctor-backends/tree/feature/more-resistant-config
But the code can't seem to call attr
properly. I tried importing a few things but it didn't work. What do I need to import to be able to call attr
?
This is the first ruby code I write so feel free to give me advice and/or refocus my attention on an improved implementation if you think this shouldn't be in helpers.rb
.
Thanks!
I have
== Aktuell
RHQ 4.9
[canvas-image="images/RHQ-classic.png"]
== la la la this is not shown
[role="canvas-caption", position="center-up"]
Klassisches Setup
[canvas-image="images/StorageNodes.png"]
== Eingebaute Storage Nodes
[role="canvas-caption", position="center-up"]
Storage Nodes
[canvas-image="images/Monitoring2.png"]
== Another slide
[role="canvas-caption", position="center-up"]
Neue Graphen
+++
here it is not obvious that the == between [canvas-image] and [role] is a) just needed for syntax sugar, that b) the image + heading is actually the [canvas-image] before and the [role]+text after and c) that the first [canvas-image] does not show on the same slide than the first == Aktuell block, even if it looks like when just looking at the == blocks.
So I think that should be re-written to something like
== Title, ignored
[canvas-image , caption= , caption-position=]
It would be nice to have a short description of the backedn with a sample how to create a reveal,js presentation using Asciidoctor
Reveal.js provides support for vertical slides generated from subsections of the 1st level slides. Would it be possible to support this in reveal.js (if not supported yet)?
To coincide with asciidoctor/asciidoctor#494, the ERB templates should be updated to produce XHTML output when the htmlsyntax
attribute is "xml".
@mojavelinux Please enable Travis in this repo to get the badge green. 😸
Now that the LaTeX backend is well on its way to being complete, thanks to @jxxcarlson, I think it's time to graduate it to its own repository. This will allow us to release it much like asciidoctor-pdf and asciidoctor-epub3 so it can be installed as a gem and loaded from the load path using the -r
flag.
Currently the slim reveal.js backend will only trigger syntax highlight on explicit source blocks. Since by default:
----
this
----
will generate a 'listing' block one need to always specify [source]
above the block.
Could both source and listing blocks be highlighted (since their description is the same) or is there a reasoning behind this?
I'm willing to do the required change.
Thanks!
When I use the slim reveal.js template a XML listing with callouts the callout is rendered wrong.
With this example:
[source,xml]
----
<?xml version="1.0" encoding="UTF-8"?>
<ivy-module version="2.0" xmlns:m="http://ant.apache.org/ivy/maven">
<info organisation="foo"
module="Bar"
revision="1.0.0-SNAPSHOT">
</info>
<configurations> <!--1-->
<conf name="compile"/>
<conf name="compile-only" extends="compile"/>
<conf name="runtime" extends="compile"/>
<conf name="test-compile" extends="compile"/>
<conf name="test" extends="runtime, test-compile"/>
</configurations>
<dependencies> <!--2-->
<dependency org="org.jboss.spec" name="jboss-javaee-6.0" rev="${version.jboss-javaee}" conf="compile-only,test-compile->default(*)"/>
<dependency org="org.aspectj" name="aspectjrt" rev="${version.aspectj}" conf="compile->default(*)"/>
<dependency org="commons-io" name="commons-io" rev="${version.commons-io}" conf="compile->default(*)"/>
</dependencies>
</ivy-module>
----
the callout gets rendered like this:
<section id="_basic_structure_ivy_xml"><h2>Basic structure ivy.xml</h2><div class="listingblock"><div class="content"><pre class="highlight"><code class="xml language-xml"><?xml version="1.0" encoding="UTF-8"?>
<ivy-module version="2.0" xmlns:m="http://ant.apache.org/ivy/maven">
<info organisation="foo"
module="bar"
revision="1.0.0-SNAPSHOT">
</info>
<configurations> <b>(1)</b>
So <b>
and </b>
are visible as text in the rendered HTML.
This does not occur when I use the haml template. :-)
But it in this case the listing is not as pretty. :-(
Add FontAwesome if the value of the icons
attribute is font
to support font-based admonition icons and the inline icon macro.
As discussed here, we suffer for the moment to propose a too basic way to split HTML pages into slides (based on title with level ==). To improve the situation, here are some suggestions after reviewing RevealJS, Slidy, LandSlide, DeckJS
[section: transition=horizontal, transition-speed=fast]
Remark : The section starts with a a section block and ends when a new section block is defined late on
[fragment: navigation=right]
There are certainly others properties that we should define globally like :
Add a helper method to coerce attribute values so that they are assigned in JavaScript as the appropriate type and safely.
There are at least two cases, currently.
In the second case, the backend is currently broken if the attribute value is not assigned a value of "true" or "false". For example, consider the following attribute declaration:
:revealjs_history:
This produces:
history: ,
I think that I know the reason. This is because the deck.js backend (https://github.com/asciidoctor/asciidoctor-backends/blob/master/haml/deckjs/document.html.haml) does not add the following lines to be able to use the options (g = goto, m = menu, b = blank page, t=table of contents)
What we generate today -->
<a class="deck-permalink" href="." title="Permalink to this slide">#</a>
<script src="deck.js/jquery-1.7.2.min.js"></script>
<script src="deck.js/core/deck.core.js"></script>
<script src="deck.js/core/deck.core.js"></script>
<script src="deck.js/extensions/hash/deck.hash.js"></script>
<script src="deck.js/extensions/menu/deck.menu.js"></script>
<script src="deck.js/extensions/goto/deck.goto.js"></script>
<script src="deck.js/extensions/status/deck.status.js"></script>
<script src="deck.js/extensions/navigation/deck.navigation.js"></script>
<script src="deck.js/extensions/scale/deck.scale.js"></script>
<script>
$(function() {
$.deck('.slide');
});
</script>
but should be -->
<a href="#" class="deck-prev-link" title="Previous">←</a>
<a href="#" class="deck-next-link" title="Next">→</a>
<p class="deck-status">
<span class="deck-status-current"></span>
/
<span class="deck-status-total"></span>
</p>
<div class="deck-toc"></div>
<form action="." method="get" class="goto-form">
<label for="goto-slide">Go to slide:</label>
<input type="text" name="slidenum" id="goto-slide" list="goto-datalist">
<datalist id="goto-datalist"></datalist>
<input type="submit" value="Go">
</form>
<a href="." title="Permalink to this slide" class="deck-permalink">#</a>
<!-- Other extension HTML snippets go here, at the bottom of the deck container. -->
<!-- Initialize the deck. You can put this in an external file if desired. -->
<script>
(function($, deck, undefined) {
$.deck.defaults.keys["previous"] = [8, 33, 37, 39];
$.deck.defaults.keys["next"] = [13, 32, 34, 39];
$.extend(true, $[deck].defaults, {
countNested: false
});
$.deck('.slide');
})(jQuery, 'deck');
</script>
In order to distribute the backends, I think it will work best if we split them into multiple repositories.
Create a backend for impress.js presentations.
Impress.js: http://bartaz.github.io/impress.js/#/bored
Additional ideas: https://github.com/regebro/hovercraft
Keep in mind that we want to try to align the different presentation backends (deck.js, reveal.js, dzslides, etc) so that the same AsciiDoc source file will work using any one of them (within reason).
Also, each backend should be create in its own git repository to make collaboration and releases easier.
I get the error NameError: uninitialized constant Asciidoctor::Stylesheets::DATA_PATH
when running asciidoctor -T ../../../../build/asciidoctor-backends/haml/deckjs 001-introduction-2014-09-03.adoc
$ asciidoctor --trace -T ../../../../build/asciidoctor-backends/haml/deckjs 001-introduction-2014-09-03.adoc
/var/lib/gems/2.1.0/gems/asciidoctor-1.5.0/lib/asciidoctor/stylesheets.rb:10:in `<class:Stylesheets>': uninitialized constant Asciidoctor::Stylesheets::DATA_PATH (NameError)
from /var/lib/gems/2.1.0/gems/asciidoctor-1.5.0/lib/asciidoctor/stylesheets.rb:6:in `<module:Asciidoctor>'
from /var/lib/gems/2.1.0/gems/asciidoctor-1.5.0/lib/asciidoctor/stylesheets.rb:1:in `<top (required)>'
from /usr/lib/ruby/2.1.0/rubygems/core_ext/kernel_require.rb:135:in `require'
from /usr/lib/ruby/2.1.0/rubygems/core_ext/kernel_require.rb:135:in `rescue in require'
from /usr/lib/ruby/2.1.0/rubygems/core_ext/kernel_require.rb:144:in `require'
from /home/niklaas/build/asciidoctor-backends/haml/deckjs/helpers.rb:1:in `<top (required)>'
from /usr/lib/ruby/2.1.0/rubygems/core_ext/kernel_require.rb:55:in `require'
from /usr/lib/ruby/2.1.0/rubygems/core_ext/kernel_require.rb:55:in `require'
from /usr/lib/ruby/vendor_ruby/asciidoctor/renderer.rb:121:in `block in initialize'
from /usr/lib/ruby/vendor_ruby/asciidoctor/renderer.rb:69:in `each'
from /usr/lib/ruby/vendor_ruby/asciidoctor/renderer.rb:69:in `initialize'
from /usr/lib/ruby/vendor_ruby/asciidoctor/document.rb:743:in `new'
from /usr/lib/ruby/vendor_ruby/asciidoctor/document.rb:743:in `renderer'
from /usr/lib/ruby/vendor_ruby/asciidoctor/document.rb:752:in `render'
from /usr/lib/ruby/vendor_ruby/asciidoctor.rb:915:in `render'
from /usr/lib/ruby/vendor_ruby/asciidoctor/cli/invoker.rb:86:in `block in invoke!'
from /usr/lib/ruby/vendor_ruby/asciidoctor/cli/invoker.rb:79:in `each'
from /usr/lib/ruby/vendor_ruby/asciidoctor/cli/invoker.rb:79:in `invoke!'
from /usr/bin/asciidoctor:13:in `<main>'
$ gem list --local
*** LOCAL GEMS ***
asciidoctor (1.5.0, 0.1.4)
bigdecimal (1.2.4)
haml (4.0.5)
io-console (0.4.2)
json (1.8.1)
minitest (5.4.1, 4.7.5)
power_assert (0.1.3)
psych (2.0.5)
rake (10.3.2, 10.1.0)
rdoc (4.1.1, 4.1.0)
slim (2.0.3)
temple (0.6.8)
test-unit (3.0.1, 2.1.2.0)
tilt (2.0.1)
$ uname -a
Linux len-x61s 3.14-2-amd64 #1 SMP Debian 3.14.15-2 (2014-08-09) x86_64 GNU/Linux
I followed the instructions at http://asciidoctor.org/docs/install-and-use-deckjs-backend/ . I installed asciidoctor
with aptitude install asciidoctor
.
https://github.com/jordanmccullough/HydeSlides?source=cr#readme
HydeSlides content is written in markeup
Currently, the inline_quoted template puts a custom class on a nested <span>
element for inline markup such as strong, emphasis, monospace, etc. For example:
[myclass]*text*
becomes
<strong><span class="myclass">text</span></strong>
This output inherits from the HTML 5 backend in AsciiDoc. But we don't have to follow it for the dzslides backend. Instead, the class should be put directly on the tag, when there is one, such as:
<strong class="myclass">text</strong>
This just makes sense and makes styling a heck of a lot simpler.
To be consistent with the <name>::<target>[<attributes>]
convention, I think we should change the placement of arguments so the data is <target>
and the chart type is the first positional attribute. I think chart type should default to "line" if not specified.
chart::sample.csv[line]
chart::sample.csv[bar]
chart::sample.csv[step]
chart::sample.csv[spline]
I think we should also support positional attributes for x and y label as well as size.
chart::<data-uri>[<type>,<x-label>,<y-label>,<width>,<height>]
We should also support a block form where the data is specified in a literal block:
[chart,line]
....
January,February,March,April,May,June,July
28,48,40,19,86,27,90
65,59,80,81,56,55,40
....
It will be necessary to register separate extensions for the block macro and block forms, but they can share common code.
Update the reveal.js backend to be compatible with Asciidoctor 0.1.4.
label of the list:: my content
throws the following stacktrace when using deckjs:
[#] /home/agori/projects/asciidoctor-backends/haml/deckjs/block_dlist.html.haml:42:in
block (2 levels) in singletonclass' [#] /home/agori/projects/asciidoctor-backends/haml/deckjs/block_dlist.html.haml:40:in
each'
[#] /home/agori/projects/asciidoctor-backends/haml/deckjs/block_dlist.html.haml:40:inblock in singletonclass' [#] /home/agori/projects/asciidoctor-backends/haml/deckjs/block_dlist.html.haml:65528:in
instance_eval'
[#] /home/agori/projects/asciidoctor-backends/haml/deckjs/block_dlist.html.haml:65528:insingletonclass' [#] /home/agori/projects/asciidoctor-backends/haml/deckjs/block_dlist.html.haml:65526:in
__tilt_21149840'
[#] /var/lib/gems/1.9.1/gems/tilt-1.4.1/lib/tilt/template.rb:170:incall' [#] /var/lib/gems/1.9.1/gems/tilt-1.4.1/lib/tilt/template.rb:170:in
evaluate'
[#] /var/lib/gems/1.9.1/gems/tilt-1.4.1/lib/tilt/haml.rb:24:inevaluate' [#] /var/lib/gems/1.9.1/gems/tilt-1.4.1/lib/tilt/template.rb:103:in
render'
With dzslides, you can define the fonts to use, e.g:
:dzslides-fonts: family=Neuton:400,700,800,400italic|Cedarville+Cursive
This results in a link like this:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Neuton:400,700,800,400italic|Cedarville+Cursive" />
Would it be possible to have it by default download the font and link it locally or embed it?
Alternatively, if linkcss
is passed, it should link to it, as it does now.
This would be useful for when the presentation is given offline.
Am trying to set things up so that I can invoke asciidoctor -r ./latex_converter.rb -b latex
from
other than the directory /Users/carlson/Dropbox/prog/git/asciidoctor-backends/ruby/latex
. This to facilitate giving the converter a real workout with real documents.
This works:
$ pwd
/Users/carlson/Dropbox/prog/git/asciidoctor-backends/ruby/latex
$ asciidoctor -r ./latex_converter.rb -b latex test/sample1.adoc -o foo.tex
The below doesn't. Any suggestions?
$ pwd
/Users/carlson/Dropbox/Beijing_2014/hodge/text
$ export LTC=/Users/carlson/Dropbox/prog/git/asciidoctor-backends/latex_converter.rb
$ echo $LTC
/Users/carlson/Dropbox/prog/git/asciidoctor-backends/latex_converter.rb
$ asciidoctor -r $LTC -b latex 002-Algebraic_Varieties.ad -o foo.tex
asciidoctor: FAILED: '/Users/carlson/Dropbox/prog/git/asciidoctor-backends/latex_converter.rb'
could not be loaded
Add support for the inline icon macro introduced by asciidoctor/asciidoctor#529.
Get admonition icons working in deck.js backend. This requires additions to the stylesheet.
What do you think about graduating the reveal.js backend to it's own repository as asciidoctor-revealjs (or asciidoctor-backend-revealjs)?
The motivation is two fold:
Regarding (1), managing different backends in the same repository prevents us from using the full capabilities of git and the GitHub interface...at least not without stepping on the toes of other parts.
For (2), I think we could consider using Bower to handle distribution so that it's easier for people to download and setup. We could also consider packaging it as a RubyGem and modifying core, if necessary, to be able to discover and load the templates from an installed location.
If you think we can do all that from within the asciidoctor-backends repository, I'm open to that possibility. But I don't want to keep it coupled if it makes things harder.
When video option is added in a paragraph or a table
[width="100%"]
|==============================================
|video:video/bob_waterslide.mp4[] |
|==============================================
HTML is not rendered with a videoblock as until now the existing templates does not support inline video like inline image, ...
<table class="tableblock frame-all grid-all" style="width:100%; ">
<colgroup>
<col style="width:50%;">
<col style="width:50%;">
</colgroup>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">video:video/bob_waterslide.mp4[]</p></td>
<td class="tableblock halign-left valign-top"></td>
</tr>
</tbody>
</table>
When I generate slides using the deckjs backend (http://asciidoctor.org/docs/install-and-use-deckjs-backend/) they all come out with links like <link href="deck.js/core/deck.core.css" rel="stylesheet">
, but I like to put that in "../core/deck.core.css" (for instance). Can we have a :deckjs_basedir
or something?
Here is a diff of the authors generated with the a2x
tool and the manpage backend for asciidoctor
.
I am using asciidoctor-backends
version a40fe5edc4af19381a25b66dcfaef0f64732530e
.
-.\" Author: Dan Allen; Sarah White; Ryan Waldron
-.\" Generator: DocBook XSL Stylesheets v1.76.1 <http://docbook.sf.net/>
-.\" Date: 09/14/2014
+.\" Author: Dan Allen
+.\" Generator: Asciidoctor 1.5.0
+.\" Date: 2014-09-27
There is an irritating # printed on slides. I figured out it is a permalink, but it still does not look good.
The offending line
%a(href='.' title='Permalink to this slide' class='deck-permalink') #
is in haml/deckjs/document.html.haml
Maybe it should be replaced by
- if attr? :deckjs_permalinks
%a(href='.' title='Permalink to this slide' class='deck-permalink') #
After exploring the asciidoctor deck.js backend I've concluded the asciidcotor back-end is out-of-date with deck.js
The asciidoctor backend refers to the deck.hash
extension through a reference to it's css file:
https://github.com/asciidoctor/asciidoctor-backends/blob/master/haml/deckjs/document.html.haml#L45
This extensions seems to have been available with deck.js 1.0.0:
https://github.com/imakewebthings/deck.js/tree/1.0.0/extensions
but not with 1.1.0, nor what's on master:
https://github.com/imakewebthings/deck.js/tree/1.1.0/extensions
will have PR soon
Add font awesome to dzslides backend.
By default? Or should we require an attribute?
Hi Dan, all,
Regarding commit 7277f99, using asciidoctor
0.1.4 on Fedora 19 we're actually now seeing errors like
NameError: undefined local variable or method `nofooter' for #<Asciidoctor::Document:0x9e8ddf8>
when using a custom template, as with asciidoctor -T backends/ foo.adoc
, whereby we have a custom document.html.erb
in backends/
. Does this commit assume another change elsewhere that we haven't yet pulled?
Many thanks!
David
zero width space character ​
is affecting the output of the manpage:
Examples using the asciidoctor.adoc
man:
-\fBasciidoctor\fR [\fIOPTION\fR]\&... \fIFILE\fR\&...
+\fBasciidoctor\fR [\fIOPTION\fR]\&...​ \fIFILE\fR\&...​
-\fB\-\-safe\fR
+\fB\-\-​safe\fR
-Auto\-number section titles\&. Synonym for
-\fB\-\-attribute numbered\fR\&.
+Auto\-number section titles\&. Synonym for \fB\-\-​attribute numbered\fR\&.
asciidoctor: 1.5.1 (latest from gem)
asciidoctor-backends: cloned from master 07.10.14
reveal.js: cloned from master 07.10.14
At a minimum.
Even better would be a thorough tutorial and an example.
Diff between the output of the asciidoctor.adoc manpage generated with the manpage backend and the a2x command:
.ad l
+.\" -----------------------------------------------------------------
+.\" * MAIN CONTENT STARTS HERE *
+.\" -----------------------------------------------------------------
+.SH "NAME"
+asciidoctor \- converts AsciiDoc source files to HTML, DocBook and other formats
.SH "SYNOPSIS"
.sp
\fBasciidoctor\fR [\fIOPTION\fR]\&... \fIFILE\fR\&...
Update the dzslides slim backend to be compatible with Asciidoctor 0.1.4.
Unable to successfully build from the Haml backend with any Asciidoc markup, including a simple sample file like this:
= Hello, World!
Jordan McCullough <[email protected]>
Test content
== Secton One
* Something Item
* More Something
A trace results in the following:
asciidoctor --trace -T ./asciidoctor-backends/haml/html5 test.adoc
./asciidoctor-backends/haml/html5/inline_anchor.html.haml:10:in `block in singletonclass': undefined local variable or method `role' for #<Asciidoctor::Inline:0x007fff1909b058> (NameError)
Thoughts on the issues for role
?
Create a backend for reveal.js presentations.
reveal.js: http://lab.hakim.se/reveal-js/
Keep in mind that we want to try to align the different presentation backends (deck.js, reveal.js, dzslides, etc) so that the same AsciiDoc source file will work using any one of them (within reason).
Also, each backend should be create in its own git repository to make collaboration and releases easier.
Create a backend to output MediaWiki syntax. Like the Markdown and AsciiDoc backends, it will need to disable escaping of special characters.
When a page contains a block_audio :
audio::audio/ocean_waves.mp3[options="autoplay,loop"]
asciidoctor generates this message :
Couldn't find a view in @views for block_audio
Create a backend for LaTex Beamer presentations.
Asciidoctor 1.5.1 [http://asciidoctor.org]
Runtime Environment (ruby 1.9.3p0 (2011-10-30 revision 33570) [x86_64-linux])
asciidoctor-backends: cloned from master 07.10.14
reveal.js: cloned from master 07.10.14
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.