Sections
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.
Classes
Section titled ClassesClass | 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> . |
Language examples
Section titled Language examplesThe 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>
JavaScript
Section titled JavaScript<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
Python
Section titled Python<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"])
Objective-C
Section titled Objective-C<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_;
}
}
Swift
Section titled Swift<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}
}
]
C Sharp
Section titled C Sharp<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
Line numbers
Section titled Line numbersAdd .linenums
to include line numbers on a code block.
Default
Section titled Default<pre class="s-code-block language-html linenums">
…
</pre>
123456
<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>
Offset
Section titled OffsetAppend a number preceeded by :
to .linenums
to offset the start of the line numbers.
<pre class="s-code-block language-json linenums:23">
…
</pre>
232425262728293031323334
[
{
"title": "apples",
"count": [12000, 20000],
"description": {"text": "...", "sensitive": false}
},
{
"title": "oranges",
"count": [17500, null],
"description": {"text": "...", "sensitive": false}
}
]