Help with Pre (code) blocks

88 views
Skip to first unread message

shawn murdock

unread,
Oct 9, 2019, 8:06:10 AM10/9/19
to TiddlyWiki
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:

cap1.png

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

unread,
Oct 9, 2019, 10:26:57 AM10/9/19
to TiddlyWiki
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

unread,
Oct 9, 2019, 1:04:20 PM10/9/19
to TiddlyWiki
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

unread,
Oct 9, 2019, 5:43:13 PM10/9/19
to TiddlyWiki
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

unread,
Oct 10, 2019, 8:52:44 AM10/10/19
to TiddlyWiki
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

unread,
Oct 10, 2019, 12:18:11 PM10/10/19
to TiddlyWiki
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
Reply all
Reply to author
Forward
0 new messages