EN
Dirask - how to format code in posts (JavaScript, HTML, CSS, React, SQL)
6
points
This article presents basic rule for post code examples firmatting on Dirask.
CSS foramtting
- 4 spaces indents for CSS code,
- additional 4 space indent prefix if css nested in html code
e.g.
script.css file:
a.button {
position: relative;
background: silver;
width: 160px;
height: 60px;
display: block;
cursor: pointer;
^^^^ <-------------------------------- 4 space indents
}
span.content {
position: absolute;
left: 50%;
top: 50%;
font-size: 14px;
transform: translate(-50%, -50%);
}
page.htm/page.html file with embedded css code:
<!doctype html>
<html>
<body>
<style>
a.button {
position: relative;
background: silver;
width: 160px;
height: 60px;
display: block;
cursor: pointer;
^^^^ <---------------------------- 2 * 4 space indents
}
^^^^ <-------------------------------- 4 space indent prefix
span.content {
position: absolute;
left: 50%;
top: 50%;
font-size: 14px;
transform: translate(-50%, -50%);
}
</style>
<a class="button" href="javascript: console.log('Button clicked!')">
<span class="content">Click me!</span>
</a>
</body>
</html>
HTML formatting
- 2 spaces indents for HTML code,
html,head,bodyelements without indents,- double quotes (
"") for attibute values
e.g.
page.htm/page.html file:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Example template</title>
<link rel="stylesheet" href="path/to/my/styles.css" />
<script type="text/javascript" src="path/to/my/script.js"></script>
^^ <--------------------- 2 space indents
</head>
<body>
<p>Web page text...</p>
<div>
<p>Web page text...</p>
<p>Web page text...</p>
^^^^ <------------------- 2 * 2 space indents
</div>
</body>
</html>
JavaScript formatting
- 4 spaces indents for JavaScript code,
- single quotes (
'') or grave accent (``) for string values
(''for old JS,``for modern JS only if needed)
e.g.
script.js file:
const calculateData = (xOffset) => {
const data = [ ];
for (var x = 0; x < 3.1415; x += 0.1) {
const y = Math.cos(x + xOffset) + 1;
data.push(50 * y);
^^^^^^^^ <---------------------------- 4 space indents
}
^^^^ <-------------------------------- 4 space indents
return data;
};
page.htm/page.html file with embedded JS code:
<!doctype html>
<html>
<body>
<script>
const calculateData = (xOffset) => {
const data = [ ];
for (var x = 0; x < 3.1415; x += 0.1) {
const y = Math.cos(x + xOffset) + 1;
data.push(50 * y);
^^^^^^^^ <---------------------------- 2 * 4 space indents
}
^^^^ <-------------------------------- 4 space indents
return data;
};
^^^^ <-------------------------------- 4 space indent prefix
</script>
<a class="button" href="javascript: console.log('Button clicked!')">
<span class="content">Click me!</span>
</a>
</body>
</html>
React formatting
- 4 spaces indents for JavaScript code,
- 2 spaces indents for JSX code,
- single quotes (
'') or grave accent (``) for JavaScript string values
(''for old JS,``for modern JS only if needed), - double quotes (
"") for JSX elemnent attibute values
e.g.
App.jsx file:
const App = () => {
const [data, setData] = React.useState(() => calculateData(0, 'initialized'));
const xOffsets = [0, 0.7853, 1.5707, 2.3559, 3.1415];
^^^^ <---------------------------- 4 space indents for JS
return (
<div>
^^ <---------------------------- 2 space indents for JSX
<Chart data={data} title="Offset" />
^ ^ <---- double quotes for HTML/JSX attribute values
<br />
<div>
<span>xOffset: </span>
{xOffsets.map(xOffset => {
^^^^ <---------------------------- 4 space indents for JS
const handleClick = () => {
setData(calculateData(xOffset, 'click handled'));
^ ^ <---- single quotes for JS
};
return (
<button key={xOffset} onClick={handleClick}>{xOffset}</button>
^^ <---------------------------- 2 space indents for JSX
);
})}
</div>
</div>
);
};