Doxml Fragments

# Headers

Code:

<h3>This is a header</h3>
<h2>This is a header</h2>
<h1>This is a header</h1>

Other HTML elements such as <p>, <div>, <h4>, <h5>, <h6>, ~~<del>~~, <br/>, <hr/>, <span>, <strong>, <b>, <i>, <s>, <u><dfn>, <cite> are also permitted.

Preview:

This is a header

Links

Use classic a tag for links. Use ~/ in href attribute to denote links within the book.

Sample:

This is a link to <a href="~/Fragments">Fragments</a> page.

Preview:

This is a link to Fragments page.

Code Snippets

toggle="true" enables Hide/Show button in the corner.

Code:

<snippet toggle="true">
  for (var i = 0; i < 10; i++) {
    ...
  }
</snippet>

Preview:

Hide

for (var i = 0; i < 10; i++) {
  ...
}

Info

Snippet also support src attribute for loading remote content.

# Code

Code:

<p>
  Use <code>&lt;code&gt;</code>tags to highlight inline code <code>identifiers</code>.
  Same as in Bootstrap, however in Doxml <c>&lt;c&gt;</c> tag also works. 
</p>
<p>
  You may also use <tag>tag</tag> to accomplish the same <c>&lt;tag&gt;</c> effect.
</p>

Preview:

Use <code>tags to highlight inline code identifiers. Same as in Bootstrap, however in Doxml <c> tag also works.

You may also use <tag> to accomplish the same <tag> effect.

Layout

Doxml depends on Bootstrap for layout. Syntax is simplified and resembles Bootstrap v2.

Sample:

<row>
  <cell span="3">
    <div style="border: 1px solid gray;">Span3</div>
  </cell>
  <cell span="4">
    <div style="border: 1px solid gray;">Span4</div>
  </cell>
  <cell span="3">
    <div style="border: 1px solid gray;">Span3</div>
  </cell>
  <cell span="2">
    <div style="border: 1px solid gray;">Span2</div>            
  </cell>
</row>

Preview:

Span3

Span4

Span3

Span2

# Markdown

Sample:

<md>
This is a **markdown** section.
You may use standard markdown syntax to produce docs.

E.g. skip a line to start a new paragraph, use <c>*</c> for *italics* or <c>**</c> for **bold**.

Markdown works best if there are long runs of text.

You may mix Doxml <c>fragments</c> and markdown.

Use <c>~~</c> for ~~strike-through~~ effect.
</md>

Preview:

This is a markdown section. You may use standard markdown syntax to produce docs.

E.g. skip a line to start a new paragraph, use * for italics or ** for bold.

Markdown works best if there are long runs of text.

You may mix Doxml fragments and markdown.

You may use ~~ for ~~strike-through~~ effect.

Watch out for Markdown indentation. Indentation is removed before Markdown processing. You should use preserveIndent="true" to tell Doxml to leave indentation as is.

# Narrow

Use <narrow> to limit the line width so it's easier to read.

Sample:

<narrow>
  <p>
    Well, it doesn't work that well in two column mode. Check <a href="~/About">About</a> page.
  </p>
</narrow>

Preview:

Well, it doesn't work that well in two column mode. Check About page.

# Notes

Sample:

<note>
  Notes are cool.
</note>
<note type="info">
  They should be used to display important information.
</note>
<note type="success" header=":)">
  Note looks better with a header.
</note>
<note type="warning">
  Note may also be used to warn readers.
</note>
<note type="danger">
  Or scare the hell out of them.
</note>

Preview:

Notes are cool.

They should be used to display important information.

:)

Note looks better with a header.

Note may also be used to warn readers.

Or scare the hell out of them.

# Scripts

Sample:

<div id="red">
  This text will turn red after five seconds.
</div>
<script>        
    setTimeout(function() {
      $('#red').css('color', 'red');
    }, 5000);          
</script>

Preview:

This text will turn red after five seconds.

# Images

Sample:

<p>
  <img src="http://www.codaxy.com/client/images/logo.png" alt="logo" />
</p>

Preview:

Attributes:

responsive="true": Default. Adds Bootstrap's img-responsive class.
center="true": Center responsive image (block element).
previewOnClick="true": Default. Adds zoomable click behaviour.

# Lists

Sample:

<row>
  <cell span="6">
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>    
  </cell>
  <cell span="6">
    <ul>
      <li>X</li>
      <li>Y</li>
      <li>Z</li>
    </ul>
  </cell>
</row>

Preview:

One
Two
Three

# Tables

Sample:

<table>
  <tr>
    <th class="text-center">#</th>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
  <tr>
    <td class="text-center">1</td>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td class="text-center">2</td>
    <td>Jo</td>
    <td>Smith</td>
  </tr>
</table>

Preview:

#	First Name	Last Name
1	John	Doe
2	Jo	Smith

# YouTube

Just copy and paste valid YouTube Url inside <youtube> tags and optionally specify width and height of it.

Sample:

<youtube width="410" height="250" v="sZnyHQ4I6LE" />

Preview:

# Description Lists

Sample:

<dl>
  <di h="Item 1">
    Item 1 description.
  </di>
  <di h="Item 2">
    Item 2 description.            
  </di>
  <di>
    <header>
      <c>Class.Method</c>
    </header>
    Headers may contain other Doxml fragments, same as descriptions.
  </di>
</dl>

Preview:

Item 1: Item 1 description.
Item 2: Item 2 description.
Class.Method: Headers may contain other Doxml fragments, same as descriptions.

# Web Sequence Diagrams

Sample:

<webSeqDiagram skin="napkin">
  title Authentication Sequence

  Alice->Bob: Authentication Request
  note right of Bob: Bob thinks about it
  Bob->Alice: Authentication Response
</webSeqDiagram>

Preview:

title Authentication Sequence

Alice->Bob: Authentication Request
note right of Bob: Bob thinks about it
Bob->Alice: Authentication Response

yUML

yUML is used to create class, activity and use case diagram samples. Skins available: default, scruffy, nofunky.

Sample:

<yUML skin="scruffy" type="class">
  [Customer]1-0..*[Address]
</yUML>

Preview:

Template

Sample:

Preview: