#Basic CSS

Torchlight handles the highlighting of all of your code for you, but there are a few styles that you will likely need to add to your CSS to make it just right.

This is the CSS we prefer, which sets up some line padding, margin off of the line numbers, and overflow scrolling. Your CSS is totally up to you though!

#Standard CSS

This is the vanilla CSS version, see below for the TailwindCSS version.

 1/*
 2 Margin and rounding are personal preferences,
 3 overflow-x-auto is recommended.
 4*/
 5pre {
 6    border-radius: 0.25rem;
 7    margin-top: 1rem;
 8    margin-bottom: 1rem;
 9    overflow-x: auto;
10}
11 
12/*
13 Add some vertical padding and expand the width
14 to fill its container. The horizontal padding
15 comes at the line level so that background
16 colors extend edge to edge.
17*/
18pre code.torchlight {
19    display: block;
20    min-width: -webkit-max-content;
21    min-width: -moz-max-content;
22    min-width: max-content;
23    padding-top: 1rem;
24    padding-bottom: 1rem;
25}
26 
27/*
28 Horizontal line padding to match the vertical
29 padding from the code block above.
30*/
31pre code.torchlight .line {
32    padding-left: 1rem;
33    padding-right: 1rem;
34}
35 
36/*
37 Push the code away from the line numbers and
38 summary caret indicators.
39*/
40pre code.torchlight .line-number,
41pre code.torchlight .summary-caret {
42    margin-right: 1rem;
43}

#Tailwind

Here is the TailwindCSS version:

 1/*
 2 Margin and rounding are personal preferences,
 3 overflow-x-auto is recommended.
 4*/
 5pre {
 6    @apply my-4 rounded overflow-x-auto;
 7}
 8 
 9/*
10 Add some vertical padding and expand the width
11 to fill its container. The horizontal padding
12 comes at the line level so that background
13 colors extend edge to edge.
14*/
15pre code.torchlight {
16    @apply block py-4 min-w-max;
17}
18 
19/*
20 Horizontal line padding.
21*/
22pre code.torchlight .line {
23    @apply px-4;
24}
25 
26/*
27 Push the code away from the line numbers and
28 summary caret indicators.
29*/
30pre code.torchlight .line-number,
31pre code.torchlight .summary-caret {
32    @apply mr-4;
33}