此页为于 SCP 维基内部使用的“组件”页。用于在其他页面中引用。


评分: +5+x

What this is

A bunch of miscellaneous CSS 'improvements' that I, CroquemboucheCroquembouche, use on a bunch of pages because I think it makes them easier to deal with.

The changes this component makes are bunch of really trivial modifications to ease the writing experience and to make documenting components/themes a bit easier (which I do a lot). It doesn't change anything about the page visually for the reader — the changes are for the writer.

I wouldn't expect translations of articles that use this component to also use this component, unless the translator likes it and would want to use it anyway.

This component probably won't conflict with other components or themes, and even if it does, it probably won't matter too much.


On any wiki:

[[include :scp-wiki:component:croqstyle]]

This component is designed to be used on other components. When using on another component, be sure to add this inside the component's [[iftags]] block, so that users of your component are not forced into also using Croqstyle.

Related components

Other personal styling components (which change just a couple things):

Personal styling themes (which are visual overhauls):

CSS changes

Reasonably-sized footnotes

Stops footnotes from being a million miles wide, so that you can actually read them.

.hovertip { max-width: 400px; }

Monospace edit/code

Makes the edit textbox monospace, and also changes all monospace text to Fira Code, the obviously superior monospace font.

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }

Teletype backgrounds

Adds a light grey background to <tt> elements ({{text}}), so code snippets stand out more.

tt {
  background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;

No more bigfaces

Stops big pictures from appearing when you hover over someone's avatar image, because they're stupid and really annoying and you can just click on them if you want to see the big version.

.avatar-hover { display: none !important; }

Breaky breaky

Any text inside a div with class nobreak has line-wrapping happen between every letter.

.nobreak { word-break: break-all; }

Code colours

Add my terminal's code colours as variables. Maybe I'll change this to a more common terminal theme like Monokai or something at some point, but for now it's just my personal theme, which is derived from Tomorrow Night Eighties.

Also, adding the .terminal class to a fake code block as [[div class="code terminal"]] gives it a sort of pseudo-terminal look with a dark background. Doesn't work with [[code]], because Wikidot inserts a bunch of syntax highlighting that you can't change yourself without a bunch of CSS. Use it for non-[[code]] code snippets only.

Quick tool to colourise a 'standard' Wikidot component usage example with the above vars: link

:root {
  --c-bg: #393939;
  --c-syntax: #e0e0e0;
  --c-comment: #999999;
  --c-error: #f2777a;
  --c-value: #f99157;
  --c-symbol: #ffcc66;
  --c-string: #99cc99;
  --c-operator: #66cccc;
  --c-builtin: #70a7df;
  --c-keyword: #cc99cc;
.terminal, .terminal > .code {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.4rem solid var(--c-comment);
  border-radius: 1rem;

Debug mode

Draw lines around anything inside .debug-mode. The colour of the lines is red but defers to CSS variable --debug-colour.

You can also add div.debug-info.over and div.debug-info.under inside an element to annotate the debug boxes — though you'll need to make sure to leave enough vertical space that the annotation doesn't overlap the thing above or below it.

…like this!

.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
  position: relative;
.debug-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  white-space: nowrap;
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }



CroquemboucheCroquembouche 制作。




[[include :scp-wiki-cn:component:pages
| medium=vintage-book
| contents=



medium 你的文本将以什么样的媒介呈现?这会决定每一页的背景图片、字体等等。我开放允许添加更多选项——如果你有想法,请与我(Croquembouche)联系。
contents 你的页面内容。可以添加非常简单的格式和图像。
style 注入文件的 CSS 样式。



  • |(分隔符)
  • `(反引号),但可以添加在反斜线之后(\`
  • ]](两个右括号),如果添加在一行末尾,必须在之后添加空格


内容(contents)参数不会由 Wikidot 呈现。它会输入一个我自己编写的解析器,并输出 HTML。

你所熟知的所有可爱的 Wikidot 语法全都无效,相反,你需要写内联 HTML。


  • 对于粗体字,需要写 <b>文本</b>,而不是 **文本**
  • 对于全角破折号,需要写原本的全角破折号(),而不是 --
  • 对于水平分割线,需要写 <hr>,而不是 -----

不像 HTML,你需要在每一行写 <p>…</p>


使用标准图像 HTML 添加图像:

<img src="http://scp-wiki-cn.wdfiles.com/local--files/你的页面/你的图像.png">

你可以通过添加 position="top"position="bottom" 来将图像移动至页面顶端或底端。无论是什么样的页面都可以用此方法移动图像。图像必须单独处于一行,位于文本之间的图像则无效:

<img position="top" src="URL">

在图像的 style 属性中直接添加如下 CSS 以水平居中:

<img style="display: block; margin-left: auto; margin-right: auto;" src="URL">





<br class="page-break">

分页符之后的内容会在下一页上。如果分页符之前有一个带有 position="bottom" 的图像,它会一如预期的那样仍然显示在页面底端。


你可以通过样式(style)参数添加 CSS,也可以在内容(contents)参数中嵌入 Javascript。

使用 CSS

任何添加在样式参数中的 CSS 会被注入到页面中。使用它来例如调整内容、添加可以用在内容中的类(class)、以及改变字体。


[[include :scp-wiki-cn:component:pages
| medium=vintage-book
| style=
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter');

.page {
font-family: 'Architects Daughter', cursive;
margin: 2rem;

.page .red {
color: red;
| contents=
文本将会显示为<span class="red">手写字体</span>。

你不能在文章的其他地方使用 CSS 模块来设置这个组件的样式——这是唯一的方法。

提示!你可以以任意顺序添加参数,但是最好将样式(style)参数放在内容(contents)参数之上。你的内容参数可能会非常、非常长——你会发现把所有设置和 CSS 放在顶端更加方便一些。

使用 Javascript

内容(contents)参数会被解析为 Javascript 模板字符串,这也是为什么它不能包含反引号。

因此,你可以在内容参数中使用内嵌表达式(${表达式})添加任意 Javascript,该表达式将会执行并替换回字符串中,例如:

[[include :scp-wiki-cn:component:pages
| medium=vintage-book
| contents=
今天是 ${new Date().toLocaleString("default", { weekday: "long" })}



请注意,虽然你可以添加任意 Javascript,但“或”运算符(||)不可用,因为它们是由禁止使用的分隔符组成的。但是,你可以使用“和”与“非”自己创建“或”:非((非 x) 和 (非 y)) 等价于 (x 或 y)。在 Javascript 里就是 !((!x) && (!y))






媒介 背景 字体 纵横比 图像来源
朴素(默认) plain-preview.png 浏览器默认 4:7
古书 book.300px.png Libre Baskerville 10:9 公共领域

除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License