Giter VIP home page Giter VIP logo

adoc-usermacro's Introduction

adoc-usermacro Asciidoctor User Macro for Confluence

1. Description

Note
This README will render better if you view the RAW file in conjunction with the Chrome AsciiDoctor.js Live Preview Extension.

This macro is designed to render the AsciiDoc body content in the page whilst preserving the original markup code in the macro body, so that subsequent edits of the page can update the original code. The AsciiDoc code is rendered at page display time by the asciidoctor.js javascript library.

2. Installation

Install the macro through the Confluence Administrator Console.

  1. Open the Configuration page as an administrator.

  2. Select Configurations ⇒ User Macros ⇒ Create a User Macro in the left navigation panel.

  3. Complete the Information and Definition fields based on the information in the Code section.

  4. Paste the velocity template code (see below) into the Template text box.

Note
This macro will work better with an additional Confluence macro installed. See Work-around for Confluence Whitespace Issues for more information.

3. Code

The velocity template source code is available in the adoc.velocity file on GitHub.

4. Disabling Asciidoctor Foundation Styles

The macro uses the Foundation Asciidoctor styles by default to present the code when it is saved.

<link type="text/css" rel="stylesheet" href="//www.norganna.com/cdn/css/adoc-foundation.css" media="all">

If you want to get the stock Confluence Look and Feel, change the css filename to adoc-confluence.css instead.

<link type="text/css" rel="stylesheet" href="//www.norganna.com/cdn/css/adoc-confluence.css" media="all">

If you remove this class completely you will be left with a mess due to the heavy use of container <div>s in the Asciidoctor HTML5 output.

5. Usage

You can use this Confluence Macro multiple times per page.

Choose one of the following insertion methods:

Use the Pretty Macro

Paste your Asciidoctor text into the code window, but be aware of the functionality in Work-around for Confluence Whitespace Issues.

Use the Raw Macro

Paste your Asciidoctor text between the {adoc} tag as suggested in Raw Macro Usage.

Raw Macro Usage
{adoc}
= Hello, AsciiDoc!
Doc Writer <doc@example.com>

An introduction to http://asciidoc.org[AsciiDoc].

== Header 2

Content content.

* List item 1
* List item 2
{adoc}

6. Work-around for Confluence Whitespace Issues

You’ll notice that if you paste your AsciiDoc text directly into the {adoc} pretty macro, all the meaningful whitespace is stripped out.

There’s no polite way of saying this: the Confluence WYSIWYG editor is less than perfect when editing anything other than Wiki markup.

6.1. Use The Insert Markup Feature

Use the Insert Markup dialog to work around this issue.

How To Load the Insert Markup dialog
  1. Create or edit your page in Confluence.

  2. Position your cursor at the location you want your document inserted.

  3. Click the drop-down button in the editor toolbar denoted by a plus icon.

  4. Select the Markup option from the drop-down menu.

How To Insert AsciiDoc Content in Insert Markup dialog.
  1. Type {adoc} and press enter.

  2. Paste your AsciiDoc code and press enter.

  3. Type {adoc} again at the end.

    Note
    The right side of the window will update with the content to be inserted.
  4. Click the Insert button at the bottom of the dialog to complete the insertion.

Insert AsciiDoc with the Insert Markup Function

Download Video

6.2. Use The Source Editor Plug-in

Note
Click the link if you are viewing on GitHub. Inline include works locally.

7. License

Copyright 2015, Ken Allan, MIT License.

See LICENSE file for more information.

adoc-usermacro's People

Contributors

norganna avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.