website/pages/en/index.js/GetStartedSection/render
class GetStartedSection:  render() {
    return (
      <div className="getStartedSection productShowcaseSection">
        <Container>
          <div
            className="getStartedFlexContainer"
            style={{
              display: "flex",
              flexFlow: "row",
              alignItems: "baseline",
              justifyContent: "space-between"
            }}
          >
            <div className="getStartedSteps">
              <h2>Get Started</h2>
              <ol>
                <li>
                  Add prettier to your project:
                  <div className="yarnOnly">
                    <MarkdownBlock>
                      {bash`yarn add prettier --dev --exact`}
                    </MarkdownBlock>
                  </div>
                  <div className="npmOnly">
                    <MarkdownBlock>
                      {bash`npm install prettier --save-dev --save-exact`}
                    </MarkdownBlock>
                  </div>
                </li>
                <li>
                  Verify by running against a file:
                  <div className="yarnOnly">
                    <MarkdownBlock>
                      {bash`yarn prettier --write src/index.js`}
                    </MarkdownBlock>
                  </div>
                  <div className="npmOnly">
                    <MarkdownBlock>
                      {bash`npx prettier --write src/index.js`}
                    </MarkdownBlock>
                  </div>
                </li>
                <li>
                  Run prettier when commiting files:
                  <div className="yarnOnly">
                    <MarkdownBlock>
                      {bash`yarn add pretty-quick husky --dev`}
                    </MarkdownBlock>
                  </div>
                  <div className="npmOnly">
                    <MarkdownBlock>
                      {bash`npm install pretty-quick husky --save-dev`}
                    </MarkdownBlock>
                  </div>
                  Then edit <code>package.json</code>:
                  <MarkdownBlock>
                    {json({
                      scripts: {
                        precommit: "pretty-quick --staged"
                      }
                    })}
                  </MarkdownBlock>
                </li>
              </ol>
            </div>
            <div
              style={{
                display: "flex",
                flexDirection: "column",
                alignItems: "flex-end",
                flexGrow: 1,
                marginLeft: "-75px"
              }}
            >
              <ButtonGroup>
                <a className="button active showYarnButton" href="#">
                  yarn
                </a>
                <a className="button showNpmButton" href="#">
                  npm
                </a>
              </ButtonGroup>
              <img
                className="decorativeRects"
                style={{
                  marginTop: "32px"
                }}
                src="/images/get_started_rects.svg"
              />
            </div>
          </div>
        </Container>
      </div>
    );
  }