Posted by Stefan_Salewski on Mar 08, 2020; 8:44pm
URL: https://discuss.asciidoctor.org/Semantic-markup-tp7737.html

What I mean is, that I do not want to type `cd /tmp` but [.userinput]#cd /tmp#

Or, for new or important text, I want to be able to type [.important]#important remark#.

So I can modify display later in CSS without touching the text document itself, and it is easier to remember style tags or to search for them.

I had used that much in my LaTeX documents and discovered recently that it is supported in AsciiDoctor too. I learned that from https://github.com/asciidoctor/asciidoctor.org/issues/422

So I can have style.css

```
@import "/home/stefan/asciidoctor-stylesheet-factory/stylesheets/riak.css";

/* https://github.com/asciidoctor/asciidoctor.org/issues/422 */

:root{
--maincolor:#00FFFF;
--primarycolor:#000000;
--secondarycolor:#AAAA00;
--tertiarycolor:#CCCCCC;
--sidebarbackground:#CACACA;
--linkcolor:#0D47A1;
--linkcoloralternate:#B71C1C;
--white:#FFFFFF;
--black:#000000;
}


.userinput{font-family: monospace, monospace;color:#000; font-size:80%;}

.monospace{font-family: monospace, monospace;color:#000; background-color: #EEE; font-size:70%;}

.important{color: #000; background-color:#FF0}

.new{color: #000; background-color:#FF0}

.dim{font-style: italic}

.quote{}
```

and

```
:stylesheet: style.css


== Test

Some `monospaced` text.

Some [red]#red# text.

== Semantic markup

He said: [.quote]#Hello#

Our unit of length is 1 [.dim]#mm#

This is a very [.important]#important remark# -- maybe displayed large or with red color.

Type [.userinput]#cd /tmp# followed by [.userinput]#compile test.c#
```

which gives

http://ssalewski.de/tmp/semanticmarkup.html

Not bad. But some questions remain:

Is there a way to map for example .userinput exactly to the default style resulting from ``? Or have I always to define it completely new? And can I define a quote style that puts quotation marks or similar characters around a text, so that He said: [.quote]#Hello# results in He said: "Hello". And finally a simple basic question, why do I have in the CSS file "font-family: monospace, monospace;" this is monospace twice. I guess I copied that from somewhere, and it seems to make a difference.