Skip to main content

Code block

Razor

Stacks provides styling for code blocks with syntax highlighting provided by highlight.js. Special care was taken to make sure our light and dark themes felt like Stack Overflow while maintaining near AAA color contrasts and still being distinguishable for those with a color vision deficiency.

Class Applies to Output
.s-code-block pre Adds proper styling to pre-formatted code.
.linenums .s-code-block Adds a line numbers column to the code block.
.linenums:<n> .s-code-block Adds a line numbers column to the code block starting at a number <n>.

The following examples are a small subset of the languages that highlight.js supports.

<pre class="s-code-block language-html">

</pre>
<form class="d-flex gy4 fd-column">
<label class="flex--item s-label" for="question-title">Question title</label>
<div class="d-flex ps-relative">
<input class="flex--item s-input" type="text" id="question-title" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?"/>
</div>
</form>
<pre class="s-code-block language-javascript">

</pre>
import React, { Component } from 'react'
import { IP } from '../constants/IP'
import { withAuth0 } from '@auth0/auth0-react';

class AddATournament extends Component {
componentDidMount() {
this.myNewListOfAllTournamentsWithAuth()
}
}

export default withAuth0(AddATournament);
<pre class="s-code-block language-css">

</pre>
.s-input,
.s-textarea {
-webkit-appearance: none;
width: 100%;
margin: 0;
padding: 0.6em 0.7em;
border: 1px solid var(--bc-darker);
border-radius: 3px;
background-color: var(--white);
color: var(--fc-dark);
font-size: 13px;
font-family: inherit;
line-height: 1.15384615;
scrollbar-color: var(--scrollbar) transparent;
}
@supports (-webkit-overflow-scrolling: touch) {
.s-input,
.s-textarea {
font-size: 16px;
padding: 0.36em 0.55em;
}
.s-input::-webkit-input-placeholder,
.s-textarea::-webkit-input-placeholder {
line-height: normal !important;
}
}
<pre class="s-code-block language-java">

</pre>
package l2f.gameserver.model;

public abstract strictfp class L2Char extends L2Object {
public static final Short ERROR = 0x0001;

public void moveTo(int x, int y, int z) {
_ai = null;
log("Should not be called");
if (1 > 5) { // what?
return;
}
}
}
<pre class="s-code-block language-ruby">

</pre>
# The Greeter class
class Greeter
def initialize(name)
@name = name.capitalize
end

def salute
puts "Hello #{@name}!"
end
end

g = Greeter.new("world")
g.salute
<pre class="s-code-block language-python">

</pre>
def all_indices(value, qlist):
indices = []
idx = -1
while True:
try:
idx = qlist.index(value, idx+1)
indices.append(idx)
except ValueError:
break
return indices

all_indices("foo", ["foo","bar","baz","foo"])
<pre class="s-code-block language-objectivec">

</pre>
#import <UIKit/UIKit.h>
#import "Dependency.h"

@protocol WorldDataSource
@optional
- (NSString*)worldName;
@required
- (BOOL)allowsToLive;
@end

@property (nonatomic, readonly) NSString *title;
- (IBAction) show;
@end

- (UITextField *) userName {
UITextField *retval = nil;
@synchronized(self) {
retval = [[userName retain] autorelease];
}
return retval;
}

- (void) setUserName:(UITextField *)userName_ {
@synchronized(self) {
[userName_ retain];
[userName release];
userName = userName_;
}
}
<pre class="s-code-block language-swift">

</pre>
import Foundation

@objc class Person: Entity {
var name: String!
var age: Int!

init(name: String, age: Int) {
/* /* ... */ */
}

// Return a descriptive string for this person
func description(offset: Int = 0) -> String {
return "\(name) is \(age + offset) years old"
}
}
<pre class="s-code-block language-less">

</pre>
@import "fruits";

@rhythm: 1.5em;

@media screen and (min-resolution: 2dppx) {
body {font-size: 125%}
}

section > .foo + #bar:hover [href*="less"] {
margin: @rhythm 0 0 @rhythm;
padding: calc(5% + 20px);
background: #f00ba7 url(http://placehold.alpha-centauri/42.png) no-repeat;
background-image: linear-gradient(-135deg, wheat, fuchsia) !important ;
background-blend-mode: multiply;
}

@font-face {
font-family: /* ? */ 'Omega';
src: url('../fonts/omega-webfont.woff?v=2.0.2');
}

.icon-baz::before {
display: inline-block;
font-family: "Omega", Alpha, sans-serif;
content: "\f085";
color: rgba(98, 76 /* or 54 */, 231, .75);
}
<pre class="s-code-block language-json">

</pre>
[
{
"title": "apples",
"count": [12000, 20000],
"description": {"text": "...", "sensitive": false}
},
{
"title": "oranges",
"count": [17500, null],
"description": {"text": "...", "sensitive": false}
}
]
<pre class="s-code-block language-csharp">

</pre>
using System.IO.Compression;

#pragma warning disable 414, 3021

namespace MyApplication
{
[Obsolete("...")]
class Program : IInterface
{
public static List<int> JustDoIt(int count)
{
Console.WriteLine($"Hello {Name}!");
return new List<int>(new int[] { 1, 2, 3 })
}
}
}
<pre class="s-code-block language-sql">

</pre>
CREATE TABLE "topic" (
"id" serial NOT NULL PRIMARY KEY,
"forum_id" integer NOT NULL,
"subject" varchar(255) NOT NULL
);
ALTER TABLE "topic"
ADD CONSTRAINT forum_id FOREIGN KEY ("forum_id")
REFERENCES "forum" ("id");

-- Initials
insert into "topic" ("forum_id", "subject")
values (2, 'D''artagnian');
<pre class="s-code-block language-diff">

</pre>
Index: languages/ini.js
===================================================================
--- languages/ini.js (revision 199)
+++ languages/ini.js (revision 200)
@@ -1,8 +1,7 @@
hljs.LANGUAGES.ini =
{
case_insensitive: true,
- defaultMode:
- {
+ defaultMode: {
contains: ['comment', 'title', 'setting'],
illegal: '[^\\s]'
},

*** /path/to/original timestamp
--- /path/to/new timestamp
***************
*** 1,3 ****
--- 1,9 ----
+ This is an important
+ notice! It should
+ therefore be located at
+ the beginning of this
+ document!

! compress the size of the
! changes.

It is important to spell

Add .linenums to include line numbers on a code block.

<pre class="s-code-block language-html linenums">

</pre>
1
2
3
4
5
6
<form class="d-flex g4 fd-column">
<label class="s-label" for="full-name">Name</label>
<div class="d-flex">
<input class="s-input" type="text" id="full-name"/>
</div>
</form>

Append a number preceeded by : to .linenums to offset the start of the line numbers.

<pre class="s-code-block language-json linenums:23">

</pre>
23
24
25
26
27
28
29
30
31
32
33
34
[
{
"title": "apples",
"count": [12000, 20000],
"description": {"text": "...", "sensitive": false}
},
{
"title": "oranges",
"count": [17500, null],
"description": {"text": "...", "sensitive": false}
}
]
Deploys by Netlify