3rdstage's Wiki
Advertisement

Contents

Language

HTML

Named Entity

Entity Name Unicode Remarks
• bullet
· · middle dot
⋯ middle horizontal ellipsis
… horizontal ellipsis
⋮ vertical ellipsis
| | vertical bar
∑ summation
∞ U+221E infinity
≈ almost equal to = asymptotic to
≅ approximately equal to
≠ not equal to
≡ identical to
↑ upwards arrow
↓ downwards arrow
← leftwards arrow
→ rightwards arrow
ₐ Latin subscript small letter a
ₘ Latin subscript small letter m
ₙ Latin subscript small letter n
Category Examples
Arrow Symbols ⮘ ⮙ ⮚ ⮛ 🡠 🡡 🡢 🡣 🡤 🡥 🡦 🡧 ⭮ ⭯
Number Symbols ① ② ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪
Subscript and superscript ⁻¹
  • HTML Arrows : A delightful reference for HTML Symbols, Entities and ASCII Character Codes

Form

MIME

Canvas

Schema.org

SVG

CSS

Property Description Syntax
word-wrap allows long words to be able to be broken and wrap onto the next line break-word|initial|inherit

Selector

Name Pattern Meaning Samples Remarks
Descendant selectors E F Matches any F element that is a descendant of an E element.
Child selectors E < F Matches any F element that is a child of an element E.
Adjacent selectors E + F Matches any F element immediately preceded by a sibling element E.
Attribute selectors E[foo] Matches any E element with the "foo" attribute set (whatever the value).

Box model

Positioning

Font

  • Consolas
    • ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Pseudo-classes/Pseudo-elements

Collections

JavaScript

References

Edition Released at Spec Remarks
11 Jun 2020 ECMAScript® 2020 Language Specification
10 Jun 2019 ECMAScript 2019 Language Specification
9 Jun 2018 ECMAScript 2018 Language Specification
8 Jun 2017 ECMAScript 2017 Language Specification
7 Jun 2016 ECMAScript 2016 Language Specification
6 Jun 2015 ECMAScript 2015 Language Specification
  • template literals (``)
  • computed property names
  • let/const declarations
  • for...of loop
  • arrow function expression (() => {...})
  • promises
  • ES6 New Features
5.1 Jun 2011 ECMAScript Language Specification 5.1 Edition
Primitive Types
  • primitive value : member of one of the types Undefined, Null, Boolean, Number, Symbol, or String
  • Primitive : There are 6 primitive data types: string, number, bigint, boolean, undefined, and symbol.
Primitive Description Remarks
undefined primitive used when a variable has not been assigned a value
null primitive that represents the intentional absence of any object value
Boolean
String primitive that is a finite ordered sequence of zero or more 16-bit unsigned integer values
Symbol primitive that represents a unique, non-String Object property key
Number primitive corresponding to a double-precision 64-bit binary format IEEE 754-2008 value
Global Methods
Method Description Remarks
isFinite()
isNaN()
parseInt()
Global Objects
Type Object Description Remarks
Fundamental Object
Function Every JavaScript function is actually a Function object.
Text processing String a constructor for strings or a sequence of characters
RegExp creates a regular expression object for matching text with a pattern
JSON parsing JavaScript Object Notation (JSON) and converting values to JSON parse(), stringify()
Indexed collections Array used in the construction of arrays
Key-value pair container Map holds key-value pairs and remembers the original insertion order of the keys.
Control abstraction objects Promise represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.
Object Property/Method Description Remarks
Object prototype.__proto__ An accessor property (a getter function and a setter function) that exposes the internal [[Prototype]] (either an object or null) of the object through which it is accessed Deprecated
prototype.constructor Returns a reference to the Object constructor function that created the instance object
preventExtensions() Prevents new properties from ever being added to an object (i.e. prevents future extensions to the object)
values() Returns an array of a given object's own enumerable property values, in the same order as that provided by a for...in loop. keys(), entries()
keys() Returns an array of a given object's own enumerable property names, iterated in the same order that a normal loop would. values(), entries()
entries() Returns an array of a given object's own enumerable string-keyed property [key, value] pairs. values(), keys()
seal() Seals an object, preventing new properties from being added to it and marking all existing properties as non-configurable
freeze() Prevents new properties from being added to it; prevents existing properties from being removed; and prevents existing properties, or their enumerability, configurability, or writability, from being changed
defineProperty() Defines a new property directly on an object, or modifies an existing property on an object, and returns the object
Number MAX_SAFE_INTEGER Represents the maximum safe integer in JavaScript (253 - 1) (= 9,007,199,254,740,991 ~ 9·1015 < 1016).
prototype.toLocaleString() Returns a string with a language-sensitive representation of this number. thousand separator
Array length Sets or returns the number of elements in that array.
forEach() Executes a provided function once for each array element.
push() Adds one or more elements to the end of an array and returns the new length of the array.
Literals
  • Literals
    • Numeric literals, Floating-point literals, Boolean literals, String literals, RegExp literals, Array literals, Object literals
Data-type Literal Type Example Remark
number Decimal literal 31, -31. 31,000 Should NOT start with 0, (31).toFixed()
Octal literal 031, 0o31 Starts with 0, 0o or 0O, 031.toFixed()
Hexadecimal literal 0xff Starts with 0x, 0xffff.toFixed()
Binary literal 0b1011 Starts with 0b or 0B, 0b111100.toFixed()
Exponent literal 1e3, 3.56e+2, 314e-2, 1225E-2
string String literal "Deep Purple", 'In Rock'
String template literal `Count: ${cnt}, Average: ${avg}`
`Sum: ${sum(a, b)}, Multipliation: ${muliple(a, b)}`
boolean Boolean literal true, false
Operators
Category Operator Name Description Remarks
Logical Operator ! NOT
&& AND Short circuit
|| OR Short circuit
Comparison == Loose Equality Returns true if the operands are equal.
=== Strict Equality Returns true if the operands are equal and of the same type. Object.is
!= Loose Inequality Returns true if the operands are not equal.
!== Strict Inequality Returns true if the operands are of the same type but not equal, or are of different type.
> Greater Than
>= Greater Than or Equal Not Less Than
< Less Than
<= Less Than or Equal Not Greater Than
Expressions and Statements
Expression/Statement Syntax Description Remarks
Rest parameter f(...r)
f(a, b, ...r)
represent an indefinite number of arguments as an array
Destructuring assignment [a, b] = [1, 2]
[a, ...r] = [1, 2, 3]
makes it possible to unpack values from arrays, or properties from objects, into distinct variables
Arrow function param => expression
(param1, ..., paramN) => expression
(param1, ..., paramN) => { statements }
a compact alternative to a traditional function expression the brackets {} and parentheses () and return are optional
Async function expression
Async function statement Async functions always return a promise. If the return value of an async function is not explicitly a promise, it will be implicitly wrapped in a promise. Await expression The await expression causes async function execution to pause until a Promise is settled (that is, fulfilled or rejected), and to resume execution of the async function after fulfillment.
Category Statement Syntax Description Remarks
Control flow if condition
switch statement switch ...
Iteration for loops creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement to be executed in the loop.
for...in loops for(var in object){ statements } iterates over all enumerable properties of an object that are keyed by strings. not for array
for...of loops for(var of iterable){ statements } creates a loop iterating over iterable objects, including: built-in String, Array, array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables.
for await...of loops for await(var of iterable){ statements } creates a loop iterating over async iterable objects as well as on sync iterables.
while loops creates a loop that executes a specified statement as long as the test condition evaluates to true.
do...while loops creates a loop that executes a specified statement until the test condition evaluates to false.
Others debugger statement debugger; invokes any available debugging functionality, such as setting a breakpoint.

Readings

Grammar
Feature var let
Scope Function Block
Global property Creat Doesn't create
Hoisting Applied Doesn't applied
Redeclaration Allowed Disallowed
Object
Class
Function
String
Number
RegExp
Array
Concurrency
  • How does JavaScript and JavaScript engine work in the browser and node? (Apr 24, 2018)
    • The lack of type system is what makes JavaScript slow to run.
    • The lack of type system in JavaScript is what makes JavaScript engine produce less optimized machine code.
    • These Web APIs are asynchronous.
    • Now the callback function is with the Web API which is performing its operation on a separate thread, separate from the main thread.
    • The only job of the event loop is to look at callback queue and once there is something pending in callback queue, push that callback to the stack. The event loop pushes one callback function at a time, to the stack, once the stack is empty. Later, the stack will execute the callback function.
    • Node.js uses Google’s V8 engine to provide JavaScript runtime and employes its own event loop using the libuv library (written in c).
    • But V8, event queue, and event loop runs on the single thread while worker threads are responsible to provide asynchronous I/O operation. That’s why Node.js is said to have as non-blocking event-driven asynchronous I/O architecture.
Promise

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

A promise is a returned object to which you attach callbacks, instead of passing callbacks into a function.

One of the great things about using promises is chaining.

In the old days, doing several asynchronous operations in a row would lead to the classic callback pyramid of doom: With modern functions, we attach our callbacks to the returned promises instead, forming a promise chain:

Promises solve a fundamental flaw with the callback pyramid of doom, by catching all errors, even thrown exceptions and programming errors. This is essential for functional composition of asynchronous operations.

A Promise is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason.

A pending promise can either be fulfilled with a value or rejected with a reason (error)

// old-fashioned passed-in callbacks
doSomething(function(result) {
  doSomethingElse(result, function(newResult) {
    doThirdThing(newResult, function(finalResult) {
      console.log('Got the final result: ' + finalResult);
    }, failureCallback);
  }, failureCallback); 

}, failureCallback);

// modern promise chain - equivalent but flat and simpler
doSomething()
.then(result => doSomethingElse(result))
.then(newResult => doThirdThing(newResult))
.then(finalResult => { console.log(`Got the final result: ${finalResult}`); }) 
.catch(failureCallback); 

// more simpler with arrow function
doSomething()
.then(result => doSomethingElse(result))
.then(newResult => doThirdThing(newResult))
.then(finalResult => { console.log(`Got the final result: ${finalResult}`); })
.catch(failureCallback);

// sync-style with async/await
async function foo() {
  try {
    const result = await doSomething();
    const newResult = await doSomethingElse(result);
    const finalResult = await doThirdThing(newResult);
    console.log(`Got the final result: ${finalResult}`);
  } catch(error) {
    failureCallback(error);
  }
}
Method Description Remarks
Promise.prototype.then(onFulfilled[, onRejected)] Appends fulfillment and rejection handlers to the promise, and returns a new promise resolving to the return value of the called handler, or to its original settled value if the promise was not handled.
Promise.prototype.catch(onRejected) Appends a rejection handler callback to the promise, and returns a new promise resolving to the return value of the callback if it is called, or to its original fulfillment value if the promise is instead fulfilled.
Promise.prototype.finally(onFinally) Appends a handler to the promise, and returns a new promise that is resolved when the original promise is resolved. The handler is called when the promise is settled, whether fulfilled or rejected.
Promise.all(iterable) Wait for all promises to be resolved, or for any to be rejected. blocked
Promise.allSettled(iterable) Wait until all promises have settled (each may resolve or reject). blocked
Promise.any(iterable)
Promise.race(iterable) Wait until any of the promises is fulfilled or rejected.
Promise.resolve(value) Returns a new Promise object that is resolved with the given value.
Promise.reject(reason) Returns a new Promise object that is rejected with the given reason.
Async/Await
Scope

JavaScript has function-level scope.

Functions can have named formal parameters, which are scoped to the body of that function.

Function declarations and variable declarations are always moved (“hoisted”) invisibly to the top of their containing scope by the JavaScript interpreter. Notice that the assignment portion of the declarations were not hoisted. Only the name is hoisted.

Declarations made using let and const are not initialized as part of hoisting.

JavaScript only hoists declarations, not initializations.

Variables declared with let and const are also hoisted, but unlike for var the variables are not initialized with a default value of undefined. Until the line in which they are initialized is executed, any code that accesses these variables will throw an exception.

The var statement declares a function-scoped or globally-scoped variable, optionally initializing it to a value.

The let statement declares a block-scoped local variable, optionally initializing it to a value.

Constants are block-scoped, much like variables declared using the let keyword. The value of a constant can't be changed through reassignment, and it can't be redeclared.

foo(); // TypeError "foo is not a function"
bar(); // valid
baz(); // TypeError "baz is not a function"
spam(); // ReferenceError "spam is not defined"

var foo = function () {}; // anonymous function expression ('foo' gets hoisted)
function bar() {}; // function declaration ('bar' and the function body get hoisted)
var baz = function spam() {}; // named function expression (only 'baz' gets hoisted)

foo(); // valid
bar(); // valid
baz(); // valid
spam(); // ReferenceError "spam is not defined"


console.log(num); // Throws ReferenceError exception
num = 6; // Initialization without declaration -> no hoisting


catName("Chloe");

function catName(name) {
  console.log("My cat's name is " + name);
}
/*
The result of the code above is: "My cat's name is Chloe"
*/
Closure
IIFE
Modulization
Performance

Collections

  • Samples for JavaScript library packaging

Platforms

Meteor

Frameworks

Front-end

Bootstrap

References
Bootstrap 4
Bootstrap 3
Readings
Collections

Foundation

React

Readings
Tools

Knockout

AngularJS

Backbone.js

  • http://backbonejs.org/
  • Desc. : gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
  • License : MIT software license
  • Written in : JavaScript
  • Sources : https://github.com/jashkenas/backbone

Ember.js

Durandal

Electron

Networking

Socket.IO

Testing

Mocha

QUnit

Jasmine

should.js

expect.js

Chai

  • https://www.chaijs.com/
  • Desc. : a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework
  • License :
  • Sources :
Readings
Function Description Remarks
isTrue(expr) Asserts that result of the expression is true. isNotTrue, isFalse
isFalse(expr) Asserts that result of the expression is false. isNotFalse, isTrue
equal(actual, expected) Asserts non-strict equality (==)
strictEqual(actual, expected) sserts strict equality (===)
deepEqual(actual, expected) Asserts that actual is deeply equal to expected. Object
isEmpty(target) Asserts that the target does not contain any values. Object, Array, Map, Set, String
sameMembers(s1, s2) Asserts that s1 and s2 have the same members in any order. Uses a strict equality check (===). Array

CSS

Compass

Sass

  • http://sass-lang.com/
  • Desc. : an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more.

Compass

Libraries

General

CommonJS

  • http://www.commonjs.org/
  • Desc. :defining APIs that handle many common application needs, ultimately providing a standard library as rich as those of Python, Ruby and Java.

RequireJS

Async

Promises

Underscore

  • http://documentcloud.github.com/underscore/
  • Desc.: a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.
  • License : MIT license

Closure Library

Later

  • http://bunkat.github.io/later/
  • Desc. : a library for describing recurring schedules and calculating their future occurrences.
  • License : the MIT license
  • Written in : JavaScript

Datatype

bn.js

Datejs

Moment.js

Moment Timezone

Countdown.js

  • http://countdownjs.org/
  • Desc. : A simple JavaScript API for producing an accurate, intuitive description of the timespan between two Date instances.
  • License : the MIT license

Chance

Function Description Parameters Remarks
integer() Return a random integer. min, max [-253 + 1, 253 - 1]
natural() Return a natural number. min, max, exclude [0, 253 - 1]
pickone() Given an array, pick a random element and return it

Immutable.js

JSON

JSON-js

JSV

schema.js

Jsonix

DOM

jQuery

  • http://www.jquery.org/
  • Desc. : a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
  • Written in : JavaScript
References
Tutorials
Articles
Collections

jQuery UI

w2ui

  • http://w2ui.com/web/
  • Desc. : a set of interrelated jQuery plugins for front-end development of data driven web applications.
  • License : the MIT License

YUI

  • http://yuilibrary.com/
  • Desc.: a free, open source JavaScript and CSS library for building richly interactive web applications.
  • License : BSD license

Prototype

  • http://prototypejs.org/
  • Desc. : adds useful extensions to the browser scripting environment and provides elegant APIs around the clumsy interfaces of Ajax and the Document Object Model.
  • License : MIT License
  • Written in : JavaScript
  • Readings

CSS

Modernizr

  • http://modernizr.com/
  • Desc. : a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
  • License ; MIT license

Respond.js

Sizzle

  • http://sizzlejs.com/
  • Desc. : a pure-JavaScript CSS selector engine designed to be easily dropped in to a host library.

Visualization

D3.js

dimple

dc.js

Cubism.js

Processing.js

KineticJS

  • http://kineticjs.com/
  • Desc. : an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.
  • License : the MIT or GPL Version 2 licenses.
  • Readings

Raphael

Paper.js

  • http://paperjs.org/
  • Desc. : an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.
  • License : MIT license

Cytoscape.js

References
Layouts
Layout Description Remarks
Grid puts nodes in a well-spaced grid
Cose (Compound Spring Embedder) uses a physics simulation to lay out graphs
Cola uses a force-directed physics simulation with several sophisticated constraints, written by Tim Dwyer
Euler a fast, high-quality force-directed (physics simulation) layout
Spread physics simulation layout

jsPlumb

svg.js

SVG.Element <---+--- SVG.Parent <---+--- SVG.Container <---+--- SVG.Doc
                |                                          |--- SVG.Nested
                |                                          |--- SVG.G
                |                                          |--- SVG.A
                |                                          +--- SVG.Defs
                |--- SVG.TextPath
                +--- SVG.Shape  <---+--- SVG.Rect
                                    |--- SVG.Ellipse
                                    |--- SVG.Line
                                    |--- SVG.PolyLine
                                    |--- SVG.Polygone
                                    |--- SVG.Path
                                    |--- SVG.Image
                                    |--- SVG.Text
                                    +--- SVG.TSpan

Snap.svg

JavaScript InfoVis Toolkit

  • http://thejit.org/
  • Desc. : provides tools for creating Interactive Data Visualizations for the Web.

Rickshaw

Google Chart Tools

JSXGraph

Galleria

Nivo Slider

Chart.js

Highcharts JS

  • http://www.highcharts.com/
  • Desc. : a charting library written in pure JavaScript, offering intuitive, interactive charts to your web site or web application.
  • License : commercial

dagre

  • https://github.com/cpettitt/dagre
  • Desc. : a JavaScript library that makes it easy to lay out directed graphs on the client-side.
  • License : the MIT License
  • Written in : JavaScript

Morris.js

Flot

Text Editing

CodeMirror

vkBeautify

SyntaxHighlighter

Highlight.js

Presentation

reveal.js

impress.js

  • https://github.com/bartaz/impress.js/
  • a presentation framework based on the power of CSS3 transforms and transitions in modern browsers
  • License : the MIT and GPL (version 2 or later) Licenses.
  • Written in : JavaScript

deck.js

jQuery Plug-ins

Tree

jsTree
  • http://www.jstree.com/
  • Desc. : a javascript based, cross browser tree component.
  • License : MIT or the GPL Version 2
jQuery plugin: Treeview

Data Grid

jqGrid
SlickGrid
DataTables
  • http://www.datatables.net/
  • Desc. : a plug-in for the jQuery Javascript library.
  • License : dual licensed under the GPL v2 license or a BSD (3-point) license.
Handsontable
  • http://handsontable.com/
  • Desc. : a minimalistic Excel-like data grid editor for HTML, JavaScript & jQuery
  • License : MIT

Input

jquery.inputmask

Navigation

Toolbar.Js

FX

jQuery Scroll Path

misc

jQuery plugin: Validation
Fotorama
  • http://fotorama.io/
  • Desc. : A simple, stunning, powerful jQuery gallery.
  • License : The MIT License
Cycle2
Spin.js
  • http://fgnass.github.io/spin.js/
  • Desc. : dynamically creates spinning activity indicators that can be used as resolution-independent replacement for AJAX loading GIFs.
  • License : The MIT License
jquery.cookie

misc

Font Awesome

Animate.css

FancyBox

Bootswatch

Gate One

Tools

Compiler

Babel

Packages

Compiler Generator

Jison

  • http://zaach.github.io/jison/
  • Desc. : takes a context-free grammar as input and outputs a JavaScript file capable of parsing the language described by that grammar.
  • License : MIT

Web Development

HTML5 Boilerplate

Initializr

Closure Compiler

Firebug

Code Analysis

JSHint

JSLint

ESLint

Documentation

JSDoc 3

Build Tool

Grunt

Brunch

Package Management

Bower

Yarn

Webpack

Tips and Tricks

JavaScript

Default parameter scope

var greetings = 'Hi';

function sayGreetings(val=greetings){
  var greetings = 'Hello';
  console.log(val);
}

sayGreetings(); // will print 'Hi'

Sleep for a specified interval using a single line

Await a promise with simple timer.

await new Promise(r => setTimeout(r, 3000));

Coding Convention

  • Variable
    • Define all variables at the top of the function.
    • Don't use symbol and bigint datatypes.
    • Use const for all of your references.
    • Note that both let and const are block-scoped
  • Function
    • Distinguish function declaration and function expression
      • Function declaration : function foo(){}
      • Function expression : var foo = function(){}
  • Object
    • Use {} instead of new Object()
    • Use [] instead of new Array()
    • Avoid wrapper objects for primitive types.
  • String
    • Distinguish RegExp.test(), String.search() and String.match(), specially in performance.
  • Must Use
  • Never Use
    • Avoid with clause.
    • Avoid eval function.
    • Avoid for-in clause, specially with array.
      • for-in loop over all the present keys in the object and its prototype chain.
  • Misc
    • Be careful with this.

HTML

Basic template

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Standard Template</title>
<style type="text/css">
/* local styles here */

</style>
</head>
<body>

</body>
</html>

CSS

Basic template

body {
  font-family: "맑은 고딕", Georgia, Verdana, sans-serif;
  font-size: 1.0em; 
  line-height:1.5;
  margin-left:2.0em;
  counter-reset: step-h3;
}

pre, code, tt {
  font-family: Consolas,monospace,Courier;
  font-size: 1.0em;
  line-height: 1.3 !important; 
}

table { border-collapse: collapse; }
th, td { border: 1px solid #999;padding: 0.2em; }

h1, h2, h3, h4, h5, h6 {
  font-family: "맑은 고딕", Helvetica, "Trebuchet MS", Verdana;
  margin-top:1.0em;
  margin-bottom:1px;
  padding-top:0px;
  padding-bottom:0px;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size:1.8em; }
h2 { font-size:1.5em; }
h3 { font-size:1.4em; }
h4 { font-size:1.3em; }
h5 { font-size:1.2em; }
h6 { font-size:1.15em; }

h3:before {
  content: counter(step-h3) ". ";
  counter-increment: step-h3;
  counter-reset: step-h4;
}
h4:before {
  content: counter(step-h3) ". " counter(step-h4) ". ";
  counter-increment: step-h4;
  counter-reset: step-h5;
}
h5:before {
  content: counter(step-h3) ". " counter(step-h4) ". " counter(step-h5) ". ";
  counter-increment: step-h5;
  counter-reset: step-h6;
}
h6:before {
  content: counter(step-h3) ". " counter(step-h4) ". " counter(step-h5) ". " counter(step-h6) ". ";
  counter-increment: step-h6;
}

div.syntaxhighlighter{
  padding-top:0.5em;
  padding-bottom:0.5em;
  padding-left:0.5em;
  border:thin solid lightgray;
}
div.syntaxhighlighter div.line{
  line-height:1.5 !important;
}

Automatic Number of Headers in HTML

You can generate the number of headers(h1 ... h6) in HTML using couner-reset, counter-increment, content properties and :before pseudo element of CSS2. But this feature is not supported with Internet Explorer 6 and 7.

To localize the numbering, you can demarcate the area using division which has id property. The following sample shows how you can do it very intuitively.

<style type="text/css">
#go-out-with-her { counter-reset:step; }
#go-out-with-her h5:before{
   content:counter(step) ". ";
   counter-increment:step;
}
</style>

<div id="go-out-with-her">
<h5>Choose a movie</h5>
<p>The movie maybe one of the most common ...</p>

<h5>Choose time</h5>
<p>
... Friday or Saturday would be the most proper day.  
Avoid Sunday or too hot day. A slightly rainy day could be positive...
</p>

<h5>Choose a theater</h5>
<p>
... You should think in advance where to go after the movie. 
A nice restaurant or a park ...
</p>

<h5>Call her</h5>
<p>
... Avoid Monday.... Three or four days before would be nice...
</p>

<h5>Prepare a small gift</h5>
<p>
The present should not too expensive, big or uncommon. 
Well-known book, CD could be nice.
</p>
</div>

The above source would be look like the following in the browser.

1. Choose a movie

The movie maybe one of the most common ...

2. Choose time

... Friday or Saturday would be the most proper day. Avoid Sunday or too hot day. A slightly rainy day could be positive...

3. Choose a theater

... You should think in advance where to go after the movie. A nice restaurant or a park ...

4. Call her

... Avoid Monday.... Three or four days before would be nice...

5. Prepare a small gift

The present should not too expensive, big or uncommon. Well-known book, CD could be nice.

The following CSS rules can be applied more generally.

div.post-body { 
  counter-reset:step-for-h4
}
div.post-body h4:before{
  content:counter(step-for-h4) ". ";
  counter-increment:step-for-h4;
}
div.post-body h4 { 
  counter-reset:step-for-h5 
}
div.post-body h5:before{
  content:counter(step-for-h4) ". " counter(step-for-h5) ". ";
  counter-increment:step-for-h5;
}
div.post-body h5 { 
  counter-reset:step-for-h6 
}
div.post-body h6:before{
  content:counter(step-for-h4) ". " counter(step-for-h5) ". " counter(step-for-h6) ". ";
  counter-increment:step-for-h6;
}

For more readings.

Samples

CSS

Simple CSS and setup of SyntaxHighlighter

<style type="text/css">
h1, h2, h3, h4, h5, h6 {
    font-family: "Lucida Grande","Trebuchet MS",sans-serif,맑은고딕,새굴림;
    text-indent: 5px;
    padding:0px 0px 0px 0px;
}
h1 {
    font-size: 170%;
}
h2 {
    background-color: #99CC33;
    border-radius: 5px 5px 5px 5px;
    color: #000000;
    font-size: 150%;
    font-weight: bold;
    line-height: 170%;
    margin-right: 15%;
}
h2 a:link, h2 a:visited {
    color: #FFFFFF;
    text-decoration: underline;
}
h3 {
    background-color: #F5DEB3;
    border-radius: 3px 3px 3px 3px;
    color: #000000;
    font-size: 130%;
    font-weight: bold;
    line-height: 150%;
    margin-right: 10%;
}
h3 a:link, h3 a:visited {
    color: #FFFFFF;
    text-decoration: underline;
}
h4 {
    font-size: 120%;
    font-weight: bold;
    text-decoration: underline;
}
h5 {
    font-size: 110%;
    font-weight: bold;
    text-decoration: underline;
}
h6 {
    font-size: 105%;
    font-weight: bold;
    text-decoration: underline;
}

body {
    counter-reset: step-for-h3;
}
h1 {
    counter-reset: step-for-h2;
}
h1:before {
    counter-increment: step-for-h1;
}
h2 {
    counter-reset: step-for-h3;
}
h2:before {
    content: counter(step-for-h2, decimal) ". ";
    counter-increment: step-for-h2;
}
h3 {
    counter-reset: step-for-h4;
}
h3:before {
    content: counter(step-for-h2, decimal) "." counter(step-for-h3, decimal) ". ";
    counter-increment: step-for-h3;
}
h4 {
    counter-reset: step-for-h5;
}

table{
  border-spacing:0;
  border-collapse:collapse;
}
table td, table th{
  border:thin solid black;
  padding:2px;
}
pre{
  border:thin dotted black;
  padding:1em;
  margin:0.5em;
}
</style>

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'></script>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

Styles for Redmine

/* Custom styles, Sangmoon Oh, 2011-07-12 */
div.wiki h1, div.wiki h2, div.wiki h3, div.wiki h4, div.wiki h5, div.wiki h6 {
  font-family:"Lucida Grande", "Trebuchet MS", sans-serif, 맑은고딕, 새굴림;
  text-indent:5px;
}
div.wiki h1 {
  font-size:170%;
}
div.wiki h2 {
  font-size:150%;
  font-weight:bold;
  #color:#FFFFFF;
  color:#000000;
  #background-color:#0080C0;
  background-color:#99CC33;
  line-height:170%;
  margin-right:15%;
  -moz-border-radius:7px;
  -webkit-border-radius:7px;
  border-radius:7px;
}
div.wiki h2 a:link, div.wiki h2 a:visited {
  color:#FFFFFF;
  text-decoration:underline
}
div.wiki h3 {
  font-size:130%;
  font-weight:bold;
  #color:#FFFFFF;
  color:#000000;
  #background-color:orange;
  #background-color:#995533;
  background-color:#F5DEB3;
  line-height:150%;
  margin-right:10%;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
}
div.wiki h3 a:link, div.wiki h3 a:visited {
  color:#FFFFFF;
  text-decoration:underline
}
 
div.wiki h4 {
  font-size:120%;
  font-weight:bold;
  text-decoration:underline;
}
div.wiki h5 {
  font-size:110%;
  font-weight:bold;
  text-decoration:underline;
}
div.wiki h6 {
  font-size:105%;
  font-weight:bold;
  text-decoration:underline;
}
 
/* need more optimization for the case when wiki area doen't start with h1 */
div.wiki {
  counter-reset:step-for-h1;
  counter-reset:step-for-h2;
  counter-reset:step-for-h3;
}
div.wiki h1 {
  counter-reset:step-for-h2;
}
div.wiki h1:before {
  counter-increment:step-for-h1;
}
div.wiki h2 {
  counter-reset:step-for-h3;
}
div.wiki h2:before {
  content: counter(step-for-h2) ". ";
  counter-increment:step-for-h2;
}
div.wiki h3 {
  counter-reset:step-for-h4;
}
div.wiki h3:before {
  content: counter(step-for-h2) "." counter(step-for-h3) ". ";
  counter-increment:step-for-h3;
}
div.wiki h4 {
  counter-reset:step-for-h5;
}

Styles for Eclipse Mylyn Wiki Editor

  • [Eclipse > Preferences > General > Editors > Text Editors > WikiText > Appearances]
body{
  font-family:"Lucida Grande", "Trebuchet MS", sans-serif, 맑은고딕, 새굴림;
  font-size: 1.0em; 
  line-height:1.5;
  margin-left:2.0em;
  text-indent:5px;
  counter-reset: step-h3;
}

code, pre, tt{
  font-family: Consolas,monospace,Courier;
  font-size: 1.0em;
  line-height: 1.3 !important; 
}

table { border-collapse: collapse; }
th, td { border: 1px solid #999;padding: 0.2em; }

h1, h2, h3, h4, h5, h6{
  margin-top:1.0em;
  margin-bottom:1px;
  padding-top:0px;
  padding-bottom:0px;
  -webkit-font-smoothing: antialiased;
}

h1 { margin-top:2.0em;font-size: 1.8em;color: #172f47; }
h2 { font-size: 1.5em;color: #172f47; }
h3 { font-size: 1.4em;color: #172f47; }
h4 { font-size: 1.3em;color: #172f47; }
h5 { font-size:1.2em;color: #172f47; }
h6 { font-size:1.15em;	color: #172f47; }

h3:before {
  content: counter(step-h3) ". ";
  counter-increment: step-h3;
  counter-reset: step-h4;
}
h4:before {
  content: counter(step-h3) ". " counter(step-h4) ". ";
  counter-increment: step-h4;
  counter-reset: step-h5;
}
h5:before {
  content: counter(step-h3) ". " counter(step-h4) ". " counter(step-h5) ". ";
  counter-increment: step-h5;
  counter-reset: step-h6;
}
h6:before {
  content: counter(step-h3) ". " counter(step-h4) ". " counter(step-h5) ". " counter(step-h6) ". ";
  counter-increment: step-h6;
}

b{ font-weight: bold; }
strong{ font-weight: bold; }
i{ font-style: italic; }
cite{ font-style: italic; }
em{ font-style: italic; }
var{ font-style: italic; }
code{ color:#4444CC; }
ins{ text-decoration: underline; }
del { text-decoration: line-through; }
sup { font-size: smaller;vertical-align: super; }
a { text-decoration: underline;color: blue; }
sup a { text-decoration: none; }
sub { font-size: smaller;vertical-align: sub; }
blockquote{	color: rgb(38, 86, 145); }
q { color: rgb(38, 86, 145);}
Advertisement