You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.3 KiB
59 lines
1.3 KiB
4 years ago
|
////
|
||
|
|
Included in:
|
||
|
|
|
||
|
|
- user-manual: text formatting: Custom styling with attributes
|
||
|
|
////
|
||
|
|
|
||
|
|
When text is enclosed in a set of single or double hash symbols (`#`), and no style is assigned to it, the text will be rendered as highlighted text (text wrapped in `<mark>`).
|
||
|
|
|
||
|
|
.Highlighted style syntax
|
||
|
|
[source]
|
||
|
|
----
|
||
|
|
include::ex-text.adoc[tag=highlight]
|
||
|
|
----
|
||
|
|
|
||
|
|
.Highlighted text HTML output
|
||
|
|
[source,html]
|
||
|
|
----
|
||
|
|
include::ex-text.adoc[tag=highlight-html]
|
||
|
|
----
|
||
|
|
|
||
|
|
.Rendered highlighted text
|
||
|
|
====
|
||
|
|
include::ex-text.adoc[tag=highlight]
|
||
|
|
====
|
||
|
|
|
||
|
|
Additionally, text marked with hash symbols can be assigned built-in styles, such as `big` and `green`.
|
||
|
|
|
||
|
|
.Built-in CSS class syntax
|
||
|
|
[source]
|
||
|
|
----
|
||
|
|
include::ex-text.adoc[tag=css-co]
|
||
|
|
----
|
||
|
|
<1> The first positional attribute is treated as a role. You can assign it a custom or built-in CSS class.
|
||
|
|
|
||
|
|
.Rendered CSS class styled text
|
||
|
|
====
|
||
|
|
include::ex-text.adoc[tag=css]
|
||
|
|
====
|
||
|
|
|
||
|
|
You can format text with custom styles that you define as well.
|
||
|
|
|
||
|
|
.Custom CSS class syntax
|
||
|
|
[source]
|
||
|
|
----
|
||
|
|
include::ex-text.adoc[tag=css-custom]
|
||
|
|
----
|
||
|
|
|
||
|
|
When converted to HTML, the word _asciidoctor_ is wrapped in `<span>` tags and the role `userinput` is used as the element's CSS class.
|
||
|
|
|
||
|
|
.HTML output
|
||
|
|
[source,html]
|
||
|
|
----
|
||
|
|
include::ex-text.adoc[tag=css-custom-html]
|
||
|
|
----
|
||
|
|
|
||
|
|
////
|
||
|
|
Add link to appendix of built-in CSS classes and how to create a custom class.
|
||
|
|
////
|