How to render beautiful blocks of code

[XYZ]

Hello friends

I found a nice code block style with a serial number on the left, and an extra nice beautification style, how do I apply it to TiddlyWiki?

Python逆向网易有道翻译练习代码 | 雨园博客 (gaoyuanqi.cn)

This is the full stylesheet for reviewing code blocks

element.style {
}
figure.highlight {
    overflow: auto;
    position: relative;
}
figure.highlight, pre {
    line-height: 1.6;
    margin: 0 auto 20px;
}
code, kbd, figure.highlight, pre {
    background: var(--highlight-background);
    color: var(--highlight-foreground);
}
figure.highlight {
    border-radius: 5px;
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.4);
    padding-top: 30px;
}
用户代理样式表
figure {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
    unicode-bidi: isolate;
}
.use-motion .animated {
    animation-fill-mode: none;
    visibility: inherit;
}
.use-motion .post-body {
    visibility: hidden;
}
@media (min-width: 992px) {
    .post-body {
        text-align: justify;
    }
}
@media (min-width: 1200px) {
    .post-body {
        font-size: 1.125em;
    }
}
.post-body {
    font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    overflow-wrap: break-word;
}
.use-motion .post-block, .use-motion .pagination, .use-motion .comments {
    visibility: hidden;
}
body {
    background: var(--body-bg-color);
    box-sizing: border-box;
    color: var(--text-color);
    font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: 1em;
    line-height: 2;
    min-height: 100%;
    position: relative;
    transition: padding 0.2s ease-in-out;
}
:host, :root {
    --fa-style-family-classic: "Font Awesome 6 Free";
    --fa-font-solid: normal 900 1em / 1 "Font Awesome 6 Free";
}
:host, :root {
    --fa-font-regular: normal 400 1em / 1 "Font Awesome 6 Free";
}
:host, :root {
    --fa-style-family-brands: "Font Awesome 6 Brands";
    --fa-font-brands: normal 400 1em / 1 "Font Awesome 6 Brands";
}
:root {
    --body-bg-color: #f5f7f9;
    --content-bg-color: #fff;
    --card-bg-color: #f5f5f5;
    --text-color: #555;
    --blockquote-color: #666;
    --link-color: #555;
    --link-hover-color: #222;
    --brand-color: #fff;
    --brand-hover-color: #fff;
    --table-row-odd-bg-color: #f9f9f9;
    --table-row-hover-bg-color: #f5f5f5;
    --menu-item-bg-color: #f5f5f5;
    --theme-color: #222;
    --btn-default-bg: #fff;
    --btn-default-color: #555;
    --btn-default-border-color: #555;
    --btn-default-hover-bg: #222;
    --btn-default-hover-color: #fff;
    --btn-default-hover-border-color: #222;
    --highlight-background: #f7f9fb;
    --highlight-foreground: #405c79;
    --highlight-gutter-background: #e4e9ee;
    --highlight-gutter-foreground: #526b86;
    color-scheme: light;
}
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}
figure.highlight::before {
    background: #fc625d;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    left: 12px;
    margin-top: -20px;
    position: absolute;
    border-radius: 50%;
    content: ' ';
    height: 12px;
    width: 12px;
}
::selection {
    background: #262a30;
    color: #eee;
}

I want the style to work directly on the code block

```
```

Any answer would be greatly appreciated

[pmario]

Have a closer look at the highlight-plugin: https://tiddlywiki.com/#Highlight%20Plugin

[XYZ]

Yes, my tiddlywiki has applied the plugin highlight, which is missing the code number on the left and some fancy code block decorations compared to the code block on this blog

[XLBilly]

If you want to add a custom theme (which changes the colors of the highlighted code), you can do as described in the plugin docs:

You can add themes from highlight.js by copying the CSS to a new tiddler and tagging it with $:/tags/Stylesheet. The available themes can be found on GitHub: highlight.js/src/styles at main · highlightjs/highlight.js · GitHub

At present, highlight.js itself didin’t support showing line numbers. See here.

[XYZ]

The fact that the highlight plugin doesn’t support line numbers is really bad news, and can it only be strongly supported by blogs like hugo, wordpress, etc？

I want to apply the style of the code block (like where the line is drawn) to my tiddlywiki, the copy code button on the right, I have configured this feature in tiddlywiki, but it is not as beautiful as this copy button

[XLBilly]

Adding the macOS like title bar and shadow can be done by overriding the default $codeblock widget. Reference: Custom Widgets, which requires tiddlywiki newer than v5.3.0.

First, add a tiddler with the following content with type set to text/css, and add a $:/tags/Stylesheet tag to it. I changed and removed some css code so that it won’t have conflict with tiddlywiki’s default style.

figure.highlight {
    overflow: auto;
    position: relative;
}
figure.highlight,figure.highlight > pre {
    line-height: 1.6;
		border: 0;
    margin: 0 auto 20px;
}
figure code,figure kbd, figure.highlight,figure pre {
    background: var(--highlight-background);
    color: var(--highlight-foreground);
}
figure.highlight {
    border-radius: 5px;
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.4);
    padding-top: 30px;
}
figure {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
    unicode-bidi: isolate;
}
.use-motion .animated {
    animation-fill-mode: none;
    visibility: inherit;
}
.use-motion .post-body {
    visibility: hidden;
}
@media (min-width: 992px) {
    .post-body {
        text-align: justify;
    }
}
@media (min-width: 1200px) {
    .post-body {
        font-size: 1.125em;
    }
}
.post-body {
    font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    overflow-wrap: break-word;
}
.use-motion .post-block, .use-motion .pagination, .use-motion .comments {
    visibility: hidden;
}
:root {
    --body-bg-color: #f5f7f9;
    --content-bg-color: #fff;
    --card-bg-color: #f5f5f5;
    --text-color: #555;
    --blockquote-color: #666;
    --link-color: #555;
    --link-hover-color: #222;
    --brand-color: #fff;
    --brand-hover-color: #fff;
    --table-row-odd-bg-color: #f9f9f9;
    --table-row-hover-bg-color: #f5f5f5;
    --menu-item-bg-color: #f5f5f5;
    --theme-color: #222;
    --btn-default-bg: #fff;
    --btn-default-color: #555;
    --btn-default-border-color: #555;
    --btn-default-hover-bg: #222;
    --btn-default-hover-color: #fff;
    --btn-default-hover-border-color: #222;
    --highlight-background: #f7f9fb;
    --highlight-foreground: #405c79;
    --highlight-gutter-background: #e4e9ee;
    --highlight-gutter-foreground: #526b86;
    color-scheme: light;
}
figure.highlight::before {
    background: #fc625d;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    left: 12px;
    margin-top: -20px;
    position: absolute;
    border-radius: 50%;
    content: ' ';
    height: 12px;
    width: 12px;
}

Then add a tiddler with the following content, add the $:/tags/Global tag to it.

\widget $codeblock(code,language)
<figure class="highlight">
<$genesis $type="$codeblock" $remappable="no" code=<<code>> language=<<language>>/>
</figure>
\end

Then all the code blocks will be applied the style:

Note that it may not be compatible with tiddlywiki’s palette colors.

[XYZ]

Thank you very much, the nice style was successfully applied, no, the copy code button from the forum no longer works

[XLBilly]

To include the copy button, you need to change the tiddler tagged $:/tags/Global in the second step to include it. I think the code for copy to clipboard button can be added between the figure element and the $genesis widget.

[XYZ]

I found two libraries that can add line numbers to blocks of code

Line Numbers ▲ Prism 插件 (prismjs.com)

GitHub - wcoder/highlightjs-line-numbers.js: Line numbering plugin for Highlight.js

However, how to apply them to tiddlywiki can be quite a challenge

$:/tags/RawMarkup

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css" rel="stylesheet" />

a = 1
b = 2
print(a+b)

It didn’t work

$__plugins_1_1.json (94.7 KB)

Tried making a plugin, but it didn’t work either