Help with Pre (code) blocks

[shawn murdock]

Hi,
  I have a problem and have been trying to find a solution. I have looked at the TW docs and searched around, but I cant figure this out. Now I dont pretend to be a expert which is why I am posting.

What I am trying to do:
I am creating some documented procedures in a "help" TW, that I have created/maintained, about managing fiber SAN switches and the CLI commands/output. I am trying to have different colored monospaced blocks for different devices to set them apart and to avoid confusion, i.e, green block for switch 1 and a blue block for switch 2,....

So I want to replicated the monospace block formatting buttons look but with different colors. I took this from the documentation and looking at the TW code and created a custom stylesheet:

.codeblock2 {
    display: block;
    word-break: normal;
    word-wrap: break-word;
    white-space: pre-wrap;
    padding: 14px;
    margin-top: 1em;
    margin-bottom: 1em;
    background-color: #e2efe8;
    border: 1px solid #92c2a8;
    padding: 0 3px 2px;
    border-radius: 3px;
    font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
}

Which gives me basically everything I want except the line breaks are not preserved. So here is a comparison of the normal and mine:

```
CACL1::> net port show
  (network port show)

Node: CACL1-01
                                                  Speed(Mbps) Health
Port      IPspace      Broadcast Domain Link MTU  Admin/Oper  Status
```

@@.codeblock2
CACL5::> net port show
  (network port show)

Node: CACL5-01
                                                  Speed(Mbps) Health
Port      IPspace      Broadcast Domain Link MTU  Admin/Oper  Status
@@

Which looks like this:

So you see the green blocks line break breaks the "container". I am not sure how to remidy this. Any suggestions would greatly be appreciated.

Also, if there is an easier or more efficient solution, please elaborate. I would like to create several variations on the color scheme.

Thanks for any help.

[PMario]

Hi Shawn,

I did have a closer look at all the possibilities to render text/plain blocks. ... None of them has a reasonable possibility to add a "class" attribute. ...

I think, that's an oversight / bug. ... So I will create an issue at github.

I think it should look similar to default syntax highlighting eg:

```.log

your content

```

The codeblock parser already knows about this syntax, but it only adds the "language" attribute to the internal parse-tree. The codeblock widget, doesn't use it to create a class. ... I think it should.

I hope, that I can find a "workaround hack" soon.

Stay tuned!

-mario

[shawn murdock]

Hi PMario,

   Thanks for the help. Actually that would be a wonderful way to implement it. I wish I knew more so I could create some kind of solution to contribute to this great product.

Again, thanks
  - Shawn

[TonyM]

Until Mario ensures the wiki text solution works you can use html div article and section tags with class and style in your tiddlers.

Ensure there is a blank line between the start of your wiki text and proceeding html e.g. div.

Regards
Tony

[PMario]

Hi Shawn,

As a fast work-around you probably can use this structure.

<pre class="blue"><code>

CACL5::> net port show
  (network port show)

Node: CACL5-01
                                                  Speed(Mbps) Health
Port      IPspace      Broadcast Domain Link MTU  Admin/Oper  Status

</code></pre>

A stylesheet tiddler would only need.

.blue {

  background: lightblue;

}

have fun!

mario

[shawn murdock]

Thanks a lot Mario and Tony.  These work as needed. I hope the class attribute "bug" gets solved, but this will keep me working  :)

Thanks again, Shawn