Asciidoctor :: Discussion

Help me get the nice style of the various examples in my own docs and on Github

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

3 messages Options

sunmaster

Help me get the nice style of the various examples in my own docs and on Github

Hi alltogether,

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.)

Ted

Re: Help me get the nice style of the various examples in my own docs and on Github

sunmaster wrote

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 -?

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
https://github.com/tedbergeron/AsciidoctorSemanticColors/blob/gh-pages/README.adoc

You can add admonition icons to GitHub .adoc preview, see

http://mrhaki.blogspot.com/2016/06/awesome-asciidoctor-using-admonition.html

- Ted @TedAtCIS

mojavelinux

Re: Help me get the nice style of the various examples in my own docs and on Github

Administrator

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:

https://github.com/asciidoctor/asciidoctor-bespoke

> 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:

http://gist.asciidoctor.org/?github-asciidoctor%2Fasciidoctor-bespoke%2F%2FREADME.adoc

Cheers,

-Dan

On Wed, Sep 6, 2017 at 12:50 AM, sunmaster [via Asciidoctor :: Discussion] <[hidden email]> wrote:

Hi alltogether,

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.)

If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Help-me-get-the-nice-style-of-the-various-examples-in-my-own-docs-and-on-Github-tp5875.html

To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

Dan Allen | @mojavelinux | https://twitter.com/mojavelinux