Languages
[Edit]
EN

Dirask - how to format code in posts (JavaScript, HTML, CSS, React, SQL)

6 points
Created by:
Root-ssh
115830

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, body elements 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>
    );
};

 

Dirask - content writing

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join