3rdstage's Wiki
Don't have an account?
Register
Advertisement
Register
in: Pages using deprecated enclose attributes

On HTML, CSS and JavaScript

Revision as of 06:34, 29 December 2020 by 3rdstage (talk | contribs) (→‎References)
 View source

Language

HTML

Named Entity

Entity Name Remarks
• • bullet
· · middle dot
⋯ ⋯ middle horizontal ellipsis
… … horizontal ellipsis
⋮ ⋮ vertical ellipsis
| | vertical bar
∑ ∑ summation
≈ ≈ 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
  • await/async statements
7 Jun 2016 ECMAScript 2016 Language Specification
6 Jun 2015 ECMAScript 2015 Language Specification
  • for...of loop
  • arrow function expression (() => {...})
  • let/const declarations
  • promises
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)
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() eturns 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.
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 a compact alternative to a traditional function expression the brackets {} and parentheses () and return are optional
Async function expression
Async function statement
Statement Syntax Description Remarks
if condition if ... else if ... else if ... else
switch statement switch ...
for loops for ...
for...in loops iterates over all enumerable properties of an object that are keyed by strings. not for array
for...of loops 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.
while loops
do...while loops

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
Scope
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'

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);}
Community content is available under CC-BY-SA unless otherwise noted.
Advertisement

Fan Feed

More 3rdstage's Wiki