Sage
Welcome to Sage
Volume (44%) Hide Volume
Topics
Boxes
To off set a block of text, and enclose it in a shaded, rounded rectangle, use the [box][end] tag. For example…

Line 1[br] Line 2 [box] Line 3[br] Line 4 [end] Line 5[br] Line 6

The above produces the following (enclosed in horizontal lines)…


Line 1
Line 2


Line 3
Line 4


Line 5
Line 6

Inline vs. Block Boxes

A block box is one where the [box] and [end] tags each appear alone on their respective lines (except for comments and/or whitespace). The previous example shows a block box.

An inline box is one where the start and/or end tags appear on a line with other content. For example:

This is an example of [box]an inline box[end], which doesn't change the text, but does make a nice [box]background[end].

The above produces the following (enclosed in horizontal lines)…


This is an example of an inline box, which doesn't change the text, but does make a nice background.

Splitting Boxes

Within a [box] tag, the [line] tag produces a thin horizontal line. For example…

Introduction[...] [box] Preface[...] [line] Details[...][br] More details[...][br] Details[...] [end] Conclusion[...]

The above produces the following (enclosed in horizontal lines)…


Introduction…


Preface…
Details…
More details…
Details…


Conclusion…

The [line] tag is not allowed outside of a [box] tag.

Alerts

You can specify the alert attribute on a [box] tag, to produce a box with an additional notice for the user. This is only supported on block boxes.

For example, to create an "Installation Instructions" box…

[box alert="Installation Instructions"] To install ProductX, follow these steps[...] [list] ## First Step ## Second Step ## Final Step [end] If you have questions, call 1-800-000-0000. [end]

The above produces a box like this…

Installation Instructions

To install ProductX, follow these steps…
  1. First Step
  2. Second Step
  3. Final Step

If you have questions, call 1-800-000-0000.


Additionally, Sage offers a handful of special alert categories, with associated custom colors. The category is inferred by looking at the first word (after removing symbols) of the alert title. For example, errors and warnings appear in red…

[box alert="Warning - Untested Code"] This code hasn't been tested, but it did compile, so[...] [end]

The above produces…

Warning - Untested Code

This code hasn't been tested, but it did compile, so…


Below is a complete list of all box alert colors, and the corresponding initial word(s) for each…

Advanced

Advanced



Bug(s) / Caution / Error(s) / Warn / Warning(s)

Bug(s) / Caution / Error(s) / Warn / Warning(s)



Deprecated

Deprecated



Example(s)

Example(s)



Hint(s) / Tip(s)

Hint(s) / Tip(s)



Important

Important



Note(s)

Note(s)


Advanced Box Titles

The [title] tag allows you to use Sage markup in the box title. For example…

[box] [title]Dividing By [&infin][end] This library doesn't support dividing by infinity. [end]

The above produces this…

Dividing By ∞

This library doesn't support dividing by infinity.


The [title] tag must follow the [box] tag immediately (other than whitespace).

You can do nearly anything in the title tag, including having multiple lines, images, links, etc. For example…

[box] [title] [img Fail.png][br]Here Be [url https://en.wikipedia.org/wiki/Welsh_Dragon]Dragons[end]! [end] This library doesn't support dividing by infinity. [end]

The above produces this…


Here Be Dragons!

This library doesn't support dividing by infinity.


The [title] tag also allows you to specify the box color independently from the title. For example…

[box alert=error] [title][img Fail.png][br]Here Be Dragons![end] This library doesn't support dividing by infinity. [end]

The above produces this…


Here Be Dragons!

This library doesn't support dividing by infinity.


Other than selecting a color, the alert attribute is ignored when the [title] tag is also present.

Removing The Title

When using the alert attribute, you can also use the NoTitle attribute to omit the title bar. For example…

[box alert=Error NoTitle] This library doesn't support dividing by infinity. [end]

The above produces this…


This library doesn't support dividing by infinity.


The NoTitle attribute must not have a value, and precludes the use of the [title] tag.

Explicit Colors

Using the color attribute, you can indicate a specific color This overrides the color implied by the alert attribute, if present. This color will be used for the thin strip along the left edge of the box. The title bar, if visible, uses the same color, at 50% opacity. For example…

[box alert="Additional Info" color=Pink] More information can be found[...] [end]

The above produces this…

Additional Info

More information can be found…


Colors may be specified using standard web color names, or as hexadecimal RGB values (prefixed with #).

The alert and color attributes are mutually exclusive in the presence of the NoTitle attribute or the [title] tag.

Code Samples in Boxes

Boxes can nest, to any desired depth. In addition, a box may include code samples, tables, lists, and so forth.

For example…

Line 1[br] Line 2 [box] Line 3 [-] a `SQL` example... [.sql] select * from acct where acct_nbr < 100 [end] Line 4 [box alert="Nested Box"] This is a nested box. [end] Line 5 [end] Line 6[br] [box alert="Nested Box"] This is a nested box, with some `monospace` text. [end] Line 7

The above produces the following (enclosed in horizontal lines)…


Line 1
Line 2


Line 3 – a SQL example...

select * from acct where acct_nbr < 100

Line 4
Nested Box

This is a nested box, with some monospace text.


Line 5


Line 6
Line 7

Note how code samples (and monospace text) appear in a nested box, of a contrasting color.

See Also

Related Items

  • The [indent] tag is similar to [box], in that both indent content. However, the [indent] tag does not produce a visible box or border.

  • A tag beginning with a period, such as [.sql] or [.pas], produces a code sample, highlighted in the syntax of the language specified.

  • The [---] and [===] tags produce single and double horizontal lines, and may appear inside or outside of [box] tags.


Last Modified: 10/24 9:45:52 am
In this article (top)  View article's Sage markup
10/24 9:45:52 am