Feb 25, 2023

lpubsppop01's site

I updated syntax highlighting settings of this site.

  • Changed colors for readability like this.
  • Fixed the classes attr and name to work.
  • Added the previously missing class keyword.

When syntax highlighting of highlight.js does not work as expected, it seems to be quicker to check the class at that point in the browser's source view.

I also updated top/bottom margins of p, pre, and ul.

  • Used margin-top to set the spacing between paragraphs, instead of the margin-bottom that was used previously.
    • The bottom margin of each page is set by padding-bottom of the container.
  • Reduced the spacing between p and the following ul to display them as like one paragraph.
/* globals.css */
...

p {
  margin-top: 0px;
}

p+p,
pre+p,
ul+p,
div+p {
  margin-top: 16px;
}

...

p+pre,
pre+pre,
ul+pre {
  margin-top: 8px;
}

...

p+ul,
li>ul {
  margin-bottom: 0px;
}

I also styled the code inside the paragraph so that it's easier to see.

p>code,
li>code {
  display: inline-block;
  color: var(--code-foreground);
}