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.
- 4 spaces indents for CSS code,
- additional 4 space indent prefix if css nested in html code
e.g.
script.css file:
xxxxxxxxxx1
a.button {2
position: relative;3
background: silver;4
width: 160px;5
height: 60px;6
display: block;7
cursor: pointer;8
^^^^ <-------------------------------- 4 space indents9
}10
11
span.content {12
position: absolute;13
left: 50%;14
top: 50%;15
font-size: 14px;16
transform: translate(-50%, -50%);17
}page.htm/page.html file with embedded css code:
xxxxxxxxxx1
2
<html>3
<body>4
<style>5
6
a.button {7
position: relative;8
background: silver;9
width: 160px;10
height: 60px;11
display: block;12
cursor: pointer;13
^^^^ <---------------------------- 2 * 4 space indents14
}15
^^^^ <-------------------------------- 4 space indent prefix16
17
span.content {18
position: absolute;19
left: 50%;20
top: 50%;21
font-size: 14px;22
transform: translate(-50%, -50%);23
}24
25
</style>26
<a class="button" href="javascript: console.log('Button clicked!')">27
<span class="content">Click me!</span>28
</a>29
</body>30
</html>- 2 spaces indents for HTML code,
html,head,bodyelements without indents,- double quotes (
"") for attibute values
e.g.
page.htm/page.html file:
xxxxxxxxxx1
2
<html>3
<head>4
<meta charset="utf-8" />5
<title>Example template</title>6
<link rel="stylesheet" href="path/to/my/styles.css" />7
<script type="text/javascript" src="path/to/my/script.js"></script>8
^^ <--------------------- 2 space indents9
</head>10
<body>11
<p>Web page text...</p>12
<div>13
<p>Web page text...</p>14
<p>Web page text...</p>15
^^^^ <------------------- 2 * 2 space indents16
</div>17
</body>18
</html>- 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:
xxxxxxxxxx1
const calculateData = (xOffset) => {2
const data = [ ];3
for (var x = 0; x < 3.1415; x += 0.1) {4
const y = Math.cos(x + xOffset) + 1;5
data.push(50 * y);6
^^^^^^^^ <---------------------------- 4 space indents7
}8
^^^^ <-------------------------------- 4 space indents9
return data;10
};page.htm/page.html file with embedded JS code:
xxxxxxxxxx1
2
<html>3
<body>4
<script>5
6
const calculateData = (xOffset) => {7
const data = [ ];8
for (var x = 0; x < 3.1415; x += 0.1) {9
const y = Math.cos(x + xOffset) + 1;10
data.push(50 * y);11
^^^^^^^^ <---------------------------- 2 * 4 space indents12
}13
^^^^ <-------------------------------- 4 space indents14
return data;15
};16
^^^^ <-------------------------------- 4 space indent prefix17
18
</script>19
<a class="button" href="javascript: console.log('Button clicked!')">20
<span class="content">Click me!</span>21
</a>22
</body>23
</html>- 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:
xxxxxxxxxx1
const App = () => {2
const [data, setData] = React.useState(() => calculateData(0, 'initialized'));3
const xOffsets = [0, 0.7853, 1.5707, 2.3559, 3.1415];4
^^^^ <---------------------------- 4 space indents for JS5
return (6
<div>7
^^ <---------------------------- 2 space indents for JSX8
<Chart data={data} title="Offset" />9
^ ^ <---- double quotes for HTML/JSX attribute values10
<br />11
<div>12
<span>xOffset: </span>13
{xOffsets.map(xOffset => {14
^^^^ <---------------------------- 4 space indents for JS15
const handleClick = () => {16
setData(calculateData(xOffset, 'click handled'));17
^ ^ <---- single quotes for JS18
};19
return (20
<button key={xOffset} onClick={handleClick}>{xOffset}</button>21
^^ <---------------------------- 2 space indents for JSX22
);23
})}24
</div>25
</div>26
);27
};
