I need your help with my first steps in Asciidoctor.
You know the example on the http://asciidoctor.org page in the "The Big Picture" section, maybe you know the http://espadrine.github.io/AsciiDocBox/ page with the default example on it and there is also the example "mysample.adoc" on http://asciidoctor.org/docs/render-documents.
All these examples have in common that they have some nice font and coloring and also good looking size(s) in relation to another of the various bold and standard texts.
My problem: I do not get these fonts and colors. What I do get - if I render the mysample.adoc on my computer - is some fat, big headers in black on a white background. The page looks like it is a pure html file without style.
I want to use asciidoc(tor) on Github. The example on http://espadrine.github.io/AsciiDocBox/ shows me that the colors and nice fonts are also possible on Github, but if I put a .adoc file in my Github repo and click on it to (pre)view, then it is also ugly as the rendering on my own pc without any fine style.
Of course, I tried to find some section in the docs and also looked for some already solved discussions but could not find one.
It seems that you get this nice red and black and white style with just the standard command to render a page.
How you get this nice rendering on your asciidoctor page and, please, how can I get a nice rendering on Github - the last is very important for me -?
Thanks for reading my problem description.
Wait: My pc is running Ubuntu (15.10) with asciidoc 8.6.9 and asciidoctor 1.5.2. Mabe you need it. (But I can not imagine that the versions are so old so that I get the problems described above.)
Your issue is the stylesheet is missing. It is not embedded or linked.
Embed Default Stylesheet
When you use Asciidoctor to create the HTML from the mysample.adoc:
> asciidoctor mysample.adoc
This will create mysample.html with the default style sheet embedded. If you view source you should see over 400 lines of style starting with this:
<style> /* Asciidoctor default stylesheet ...
Link Default Stylesheet
Alternatively you can link to a stylesheet
> asciidoctor -a linkcss mysample.adoc
This will create mysample.html and asciidoctor.css
This is how the HTML page http://espadrine.github.io/AsciiDocBox/ works. if you view source you can see that there is this asciidoc.css stylesheet linked:
<link rel="stylesheet" href="asciidoc.css">
They uploaded index.html and asciidoc.css in the same directory.
GitHub AsciiDoc Preview
When you add a .adoc file to GitHub and preview it, you can see their built-in style is very black and white
e.g. GitHub's black and white style
You can add admonition icons to GitHub .adoc preview, see
- Ted @TedAtCIS
In reply to this post by sunmaster
> How you get this nice rendering on your asciidoctor page and, please, how can I get a nice rendering on Github - the last is very important for me -?
We don't have any control over how AsciiDoc is rendered on GitHub. The best I've been able to do is add admonition icons and customize some text such as the table of contents title. Here's an example:
> The example on http://espadrine.github.io/AsciiDocBox/ shows me that the colors and nice fonts are also possible on Github, but if I put a .adoc file in my Github repo and click on it to (pre)view, then it is also ugly as the rendering on my own pc without any fine style.
That's not GitHub (proper), that's GitHub Pages, which is a separate, static web server. You can put any HTML and CSS on GitHub Pages if you want (just commit to the gh-pages branch). The preview of the file in GitHub repository is completely different and that's the part out of our control.
If you want a nicer preview of a file in a repository on GitHub, you can view it through DocGist. For example:
On Wed, Sep 6, 2017 at 12:50 AM, sunmaster [via Asciidoctor :: Discussion] <[hidden email]> wrote:
|Free forum by Nabble||Edit this page|