Skip to content

Instantly share code, notes, and snippets.

@dcode
Last active June 3, 2024 07:24
Show Gist options
  • Save dcode/0cfbf2699a1fe9b46ff04c41721dda74 to your computer and use it in GitHub Desktop.
Save dcode/0cfbf2699a1fe9b46ff04c41721dda74 to your computer and use it in GitHub Desktop.
Demo of some useful tips for using Asciidoc on GitHub

GitHub Flavored Asciidoc (GFA)

3137042?v=3&s=200

This gist is to capture some of the semantics of GitHub-Flavored Asciidoc. GitHub uses Asciidoctor in safe mode to render files with the extension .adoc, .asc, and .asciidoc. This works in standard repositories as well as gists.

I think most people use Markdown when creating documentation on GitHub. Markdown is great and easy, but I often create technical documentation or training material where some of the additional semantics of Asciidoc are really helpful.

GitHub-Specific customizations

Often you might need to adjust some settings whether your document is being rendered on GitHub or offline using Asciidoctor or similar. In your header simply use the ifdef preprocessor macro:

ifdef::env-github[]
:imagesdir: foo/
endif::[]

Everything within the ifdef and endif will only be processed if you are on GitHub.

Table of Contents

Often, I will write long documents that could use some extra organization (like this one). Asciidoc can automatically render a Table of Contents (TOC) for you, based upon the heading structure you have used. This is especially handy for web content or PDFs (when rendered offline).

To use TOC on GitHub, I use the following:

:toc:
:toc-placement!:

Here is my preamble paragraph, but I could really place the TOC anywhere! Lorem ipsum foo bar baz.

toc::[]

The :toc: directive states that I want to enable the :toc: processor. The :toc-placement!: directive undefines the current placement strategy, which doesn’t work on GitHub. This indicates that we will specify where the TOC should be placed.

Lastly, the toc::[] tells Asciidoctor to render a Table of Contents for the whole document here.

Admonitions

Admonitions are handy blocks that are rendered seperate from the rest of the content. This is really helpful for explaining something that doesn’t quite fit the flow, but you need to get the readers' attention. The ifdef portion and the rest of the lines that start with : go in your header.

The pre-processor directive ifdef checks to see if the GitHub environment is being used. To account for the opposite, create a block using ifndef. You can look at the header of this document to see how I managed it for this document.

Example conditional enabling of icons for admonitions
ifdef::env-github[]
:tip-caption: :bulb:
:note-caption: :information_source:
:important-caption: :heavy_exclamation_mark:
:caution-caption: :fire:
:warning-caption: :warning:
endif::[]

[NOTE]
====
A sample note admonition.
We can use gemoji icons in the Asciidoctor markup.
We assign an icon name to the document
attributes `tip-caption`, `note-caption` and `important-caption`.
====

TIP: It works!

IMPORTANT: Asciidoctor is awesome, don't forget!

CAUTION: Don't forget to add the `...-caption` document attributes in the header of the document on GitHub.

WARNING: You have no reason not to use Asciidoctor.

Will be rendered as:

ℹ️

A sample note admonition. We can use gemoji icons in the Asciidoctor markup. We assign an icon name to the document attributes tip-caption, note-caption and important-caption.

💡
It works!
Asciidoctor is awesome, don’t forget!
🔥
Don’t forget to add the …​-caption document attributes in the header of the document on GitHub.
⚠️
You have no reason not to use Asciidoctor.

Images

Images work as you would expect using the normal image syntax:

image::my_filename.png[]

You can also give an absolute URL:

image::https://avatars3.githubusercontent.com/u/3137042?v=3&s=200[]

There is a caveat, however. In order for them to be rendered inline, you must provide an absolute path to the :imagesdir: directive. On GitHub this consists of a full HTTPS path to the image’s parent directory. Once you have all of your images uploaded into your repository, look at the raw link for one of the images. Select just the directory portion of the URL and put that into:

ifdef::env-github[]
:imagesdir: https://gist.githubusercontent.com/path/to/gist/revision/dir/with/all/images
endif::[]
ℹ️
When writing a Gist, all files must be in a single, flat directory. To upload images, you must first create a file in the Gist and then you can clone it. Once you’ve cloned it locally, you can add anything you like as long as you do not create any subdirectories.

Callouts

Callouts are a great way to explain code segment and are, in fact, the one of the two main reasons I even looked into asciidoc (the other being the admonition blocks). Asciidoctor will place numbers in the code listing, which you can uses as references following the code listing.

[source]
 ----
\ifdef::env-github[] <1> (1)
:imagesdir: https://gist.githubusercontent.com/path/to/gist/revision/dir/with/all/images
endif::[]
\ifndef::env-github[] <2>
:imagesdir: ./
endif::[]
 ----
<1> Use the `ifdef` to customize for online rendering (2)
<2> Use the `ifndef` to customize for offline
  1. Callouts in the body of the listing appear as either an icon or within parentheses.

  2. The block underneath allows you to explain the code sample without getting in the way

What Next?

I’ll add more comments here as I write and find interesting nuances. In the meantime, the Asciidoctor project has GREAT user manual and Quick Reference!

@abelsromero
Copy link

@Sherspock

Is this supported somehow without making use of a process-and-commit pipeline, whether by workaround or not?

Not in GitHub, but they do work in Gitlab. But with GH-Actions the procres is made really easy.

I've also tried using the AsciiDoc chrome plugin in Brave with no luck properly rendering adocs with include directives in them on GitHub either.

Just guessing, but if you are using something like include::my-part.adoc[] I doubt the plugin is able get the path. Overall, I'd recomend not to try to get a 100% accurate local preview or repository UI preview, complex doc builds just will require doing a full conversion.
Said that, on the bright side, intellij plugin offers the best experience so far in local, with a decent preview, autocomplete and refactor features.

Does this work in GitLab? github/markup#1095 isn't stagnant, but I didn't see anything that looked especially promising at a glance.

Yes, not a rant, just facts. It's true that GitLab team has been more open to imprevements that GitHub, work with the later is slower.

@fsundermeyer
Copy link

I spent a little chunk of time trying to find your workaround in both the project you
mentioned and the project it was absorbed into. Naturally I had to backtrack a little
with SUSE. I couldn't actually find a single instance in either of an include rendering > properly in GitHub.

As far as I know including files in ASCIIDoc documents as well as resolving attributes is disabled for security reasons on GitHub.
However, it looks like a simple include statement at least results in a clickable link to the included document in the meantime, so the workaround I posted above is no longer needed (see https://github.com/SUSE/doc-caasp/blob/master/adoc/book_admin.adoc for an example).

Does this work in GitLab?

https://about.gitlab.com/releases/2019/06/22/gitlab-12-0-released/#support-for-asciidoc-include-directive
It at least works in an on premise Gitlab installation I am using (including resolving of attributes), haven't tested gitlab.com, though.

@yakryder
Copy link

@abelsromero
Thank you much! Without understanding it better or having some clear examples of how it might work in my specific context, the idea of allowing an action to commit changes makes me nervous. I appreciate the GitLab and plugin tip!

@fsundermeyer
Ah, thank you! It's clear to me now I didn't understand what that workaround was for.

Looks like a self-hosted instance of GitLab isn't necessary to make this work. I have confirmed that includes and attributes appear to work just fine on GitLab. At least in a simple test case including text and an attribute from a single document into another with a reference to that attribute.

@abelsromero
Copy link

@Sherspock

Thank you much! Without understanding it better or having some clear examples of how it might work in my specific context, the idea of allowing an action to commit changes makes me nervous. I appreciate the GitLab and plugin tip!

The publicaton in fact is trivial with https://github.com/JamesIves/github-pages-deploy-action. Here is an example of a GH-Action that publishes and Antora/Asciidoctor site on GH-Pages when a change on "main" branch is done, docs are in a folder called "docs" alongside the code. The tricky part is using upload-artifact and download-artifact to share the resulted converted docs in HTML between conversion and push steps.
The only thing to adapt is the "Generate site using antora site action", the rest is always the same.

To know more just drop by the asciidoctor gitter channels or the forum.

name: Build & publish docs
on:
  push:
    branches:
      - main

env:
  SITE_DIR: 'site'

jobs:
  build_site:
    name: "Build site with Antora"
    runs-on: [ubuntu-latest]
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: "Generate site using antora site action"
        uses: kameshsampath/antora-site-action@master
        with:
          antora_playbook: antora-playbook.yml
      - name: "Upload generated site"
        uses: actions/upload-artifact@v1.0.0
        with:
          name: site
          path: "${{ github.workspace }}/build/${{ env.SITE_DIR }}"
  deploy_site:
    runs-on: [ubuntu-latest]
    needs: [build_site]
    name: "Deploy GitHub Pages"
    steps:
      - name: Setup Node.js for use with actions
        uses: actions/setup-node@v1.4.4
        with:
          version: '14'
      - name: Checkout
        uses: actions/checkout@v2
      - name: Download generated site
        uses: actions/download-artifact@v1
        with:
          name: site
          path: "${{ github.workspace }}/${{ env.SITE_DIR }}"
      - name: Deploy to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@3.7.1
        with:
          GITHUB_TOKEN: "${{ github.token}}"
          FOLDER: "${{ env.SITE_DIR }}"
          BRANCH: 'gh-pages'
          COMMIT_MESSAGE: "[CI] Publish Documentation for ${{ github.sha }}"
          CLEAN: true

@mojavelinux
Copy link

As we work on revamping the docs site for Asciidoctor, I would love to see a section dedicated to succeeding with AsciiDoc on GitHub. There are certainly idiosyncrasies to understand and having a docs page on the topic will certainly help people who host their AsciiDoc files there. Perhaps consider submitting this to the new docs for Asciidoctor (which will live in the main asciidoctor repository).

My only objection is the term "GitHub Flavored AsciiDoc". There is no such thing. Please don't use this term as it suggests fragmentation that's simply not there (like there is with Markdown). There is only one AsciiDoc. The software GitHub uses to process it is the same software that's used throughout the ecosystem (Asciidoctor). What differs is how the rendered HTML is displayed. GitHub applies their own stylesheet to it, one that we have little control over. There is a somewhat unspoken API with the stylesheet in AsciiDoc that becomes visible when a different stylesheet is applied. I think those differences are certainly worth noting. GitHub also disables includes, but that is another matter.

(If any term applies here, it would be GitHub Limited AsciiDoc. But I'm concerned that would come across as unnecessarily critical.)

@mojavelinux
Copy link

In order for [images] to be rendered inline, you must provide an absolute path to the :imagesdir: directive.

This is not a true assertion. Relative image paths do work. If the document is nested in a different structure than the images, you may need to use a different value compared to your publishing environment. But relative paths work even in this scenario.

@siddjain
Copy link

what about math? math does not render for me on github.

@JoeArauzo
Copy link

Thanks for the tip on how to get admonitions with icons working on GitHub. Take a look at my AsciiDoc README Template.

@Jeeppler
Copy link

@mojavelinux thanks for pointing out that all includes are disabled in GitHub. Furthermore, the most important messages was, that there is no fragmentation and no GitHub Flavored Asciidoc (GFA).

@mojavelinux
Copy link

what about math? math does not render for me on github.

It's true that math (i.e., STEM) does not render on GitHub. Though there are workarounds we could still explore, like using their image service to generate an SVG (e.g., https://render.githubusercontent.com/render/math?math=\displaystyle \text{b} = V D) But just because GitHub won't render something doesn't make it not AsciiDoc. It just means GitHub is not providing a full fidelity experience. And there's literally nothing we can do about it*. We have offered to help. But at the end of the day, it's their platform and their choice. And they simply refuse to implement certain display features, despite countless pleas from the community.

Where you do see these display features implemented is on GitLab. I think, in many ways, they are leading the way on what it means to support AsciiDoc properly in a repository browser, and hopefully others will follow.

* Perhaps the AsciiDoc WG can play an arbitration role. We'll have to see.

@mojavelinux
Copy link

@JoeArauzo Nice!

@husam-e
Copy link

husam-e commented Mar 8, 2021

Thanks for this! Any tips on rendering mermaid diagrams in asciidoc READMEs?

@JoeArauzo
Copy link

Thanks for this! Any tips on rendering mermaid diagrams in asciidoc READMEs?

I see mention of mermaid diagrams at https://asciidoctor.org/docs/asciidoctor-diagram/.

@diguage
Copy link

diguage commented Mar 29, 2021

:toc:
:toc-placement!:

Here is my preamble paragraph, but I could really place the TOC anywhere! Lorem ipsum foo bar baz.

toc::[]

It's nice. Thank you!

@eshepelyuk
Copy link

eshepelyuk commented Mar 30, 2021

Does GitHub exposeb any other custom attributes except env-github ?
Or maybe there is a way to detect current repo name.

It could be extremely usuful for PR s.

@jlisee
Copy link

jlisee commented Jul 6, 2021

@dcode thanks for putting this out there, it's a great demo of what Asciidoc can do in GitHub. I did notice that all of your links are broken, for example the first link should be link:http://asciidoctor.org/[Asciidoctor] not link::http://asciidoctor.org/[Asciidoctor]. The issue is that you are using link:: instead of the normal link: macro to start your links.

@kspurgin
Copy link

It looks like it might not be possible to have inline rendered images in an AsciiDoc file in a private repo.

I think it assumes the <img src= value used to render the image will be base url from imagesdir + image file name from image reference

But in a private repo, there is a token on the end of the URL for any raw file.

@b-layer
Copy link

b-layer commented Oct 30, 2021

Anyone else notice that sidebars don't render well on GH? I tried using it here https://github.com/b-layer/musecnav#popup (it starts with the text "Numerical Selection in the Popup"). No visual delineation...looks terrible. Looks fine locally.

@abelsromero
Copy link

@b-layer There's not much tha can be done. This is GitHub-Flavored Asciidoc, not all features are allowed and there are some style modifications. Using GH preview is nice for simple things, but not something to consider for a professional result.

@b-layer
Copy link

b-layer commented Nov 4, 2021

@abelsromero Yes, thanks, I'm aware of all that but I hadn't seen any mention of this particular failing before (e.g. in the gist we're commenting on) and was wondering if perhaps I'd missed something, if there is any known workaround and if no to both of those at least to note it for any future readers wondering the same thing.

@theAkito
Copy link

theAkito commented Nov 9, 2021

I've tested using the .ad file name extension several times, already. It simply does not work!

@diguage
Copy link

diguage commented Feb 17, 2022

How to use asciidoc in the issue?

@JoeArauzo
Copy link

@theAkito You must use either .asciidoc, .adoc, or .asc, per https://github.com/github/markup/blob/master/README.md#markups.

@prudhomm
Copy link

nice doc!
it is a pity that Github does not have the same level of support for asciidoc as gitlab
in particular supporting math

@donnels
Copy link

donnels commented May 17, 2022

Nice if statement helps me a lot. thank you.

@pepa65
Copy link

pepa65 commented Jul 23, 2023

I just created a README.ad but it is not rendered at all...
Edit: Turns out .ad is not recognized, so use .adoc.

@dcode Please correct this gist by replacing .ad with .asc!

@abelsromero
Copy link

abelsromero commented Jul 24, 2023

Leaving the list of official file extensions here because it always takes me some time to find 👉 https://github.com/github/markup/blob/master/README.md#markups (.asciidoc, .adoc, .asc)

@dcode
Copy link
Author

dcode commented Jul 24, 2023

file extension updated. It did used to be .ad. I never intended this gist to be an authoritative documentation source, but I'm glad it's helped so many people! Sorry it took so long to get the file extension edited.

@dcode
Copy link
Author

dcode commented Jul 24, 2023

Fixed the links, as well.

@Fred-Vatin
Copy link

About

:toc:
:toc-placement!:

Here is my preamble paragraph, but I could really place the TOC anywhere! Lorem ipsum foo bar baz.

toc::[]

This is deprecated.
If you want to position toc::[] anywhere, now use:

:toc: macro

Here is my preamble paragraph, but I could really place the TOC anywhere! Lorem ipsum foo bar baz.

toc::[]

If you want to position it after a preamble, use this:

:toc: preamble

Here is my preamble.
The toc will be inserted after the ''' (this insert a line) and before the first section.
No need to use the macro toc::[] anymore.

'''

== First section

source

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment