This document explains the elements available to you when using newline and some recommendations using them. In fact, this text is written in a 

🦸 This post is part of a series. You might also be interested in viewing 

newline's Guide to Writing Remarkable Technical Blog Posts

newline supports many of the standard elements you would expect from a rich text editor -- and several unique ones. Let's get the basics out of the way, starting with the essential marks:

 highlighted inline marks. These can be created by selecting a word and using the inline menu. 

You can type markdown-like syntax for each of these by wrapping a word in two stars 

 for italic. Code highlighted words can be created by surrounding a word with back-ticks. 

These marks make your post much easier to scan. 

 highlighting for multi-line code snippets. Instead, use the Code Blocks described below.

You can link to something by selecting the text and clicking the "chain-link" icon in the menu. Here's an 

You can also type links using a markdown-like syntax. If you type this: 

Don't show visible URLs. If you want to link somewhere, use a link.

You can input headings using markdown-like text. Headings can quickly be typed by typing one, two, or three pound (

Headings help the reader know what's in a section and so 

✅ (h2) useLocation - A Hook for Reading the URL

You can add an image by simply dragging it on to the page.

There are a number of formatting options you can use on the image to make it fit on your page. The fox image above is full-bleed, but you can also create inline or "wide" images.

Sometimes you want to call out a bit of text like this:

⚠️ Don't jump off a cliff holding only an umbrella.

You can create a callout block by using the + plus button on an empty line. 

There are a variety of callout blocks available. To change the callout box type, triple-click on the box and select the type from the menu.

🦹‍♂️ This is an error callout box.

“Folks are usually about as happy as they make their minds up to be.” 

You can create a code block by typing three backticks in a row. It looks like this:

let reducer: Reducer<AppState> =
  (state: AppState, action: Action): AppState => {
  switch (action.type) {
  case 'ADD_MESSAGE':
    return {
      messages: state.messages.concat(
        (<AddMessageAction>action).message
      ),
    };

👩‍🎤 Use a code formatting tool like 

 per code block. Pasting huge amounts of code is confusing. Instead, break it up and explain smaller chunks.

. This makes it super easy to keep code in one place, but still discuss the code in a blog post, and easily update it when it changes. 

Here's what a Github code embed looks like (notice the link to the repository file):

Click here to learn how to embed code blocks

You can embed images, videos, audio, and code examples from popular sites. To do this, simply paste the link into the blog post and the embed will be expanded.

Both of these embeds were created by simply pasting the link to the Codepen / Youtube video.

Anyone can write a post on newline. We have a ton of new features planned to make it the best site to write programming tutorials. Try it out!

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">newline Formatting Guidelines</h1><div data-node-type="summary" class="summary-block">This document explains the elements available to you when using newline and some recommendations using them. In fact, this text is written in a <em>Summary</em> block.</div><div data-panel-type="tip" data-panel-position="inline" class="panel panel-type-tip panel-position-inline"><div class="panel-container lolwut"><p>🦸 This post is part of a series. You might also be interested in viewing <a href="https://www.newline.co/@eigenjoy/newlines-guide-to-writing-remarkable-technical-blog-posts---d6d89b6a" rel="noopener noreferrer nofollow">newline's Guide to Writing Remarkable Technical Blog Posts</a>, as well as the <a href="https://www.newline.co/@eigenjoy/newline-tutorial-template--3161667d" rel="noopener noreferrer nofollow">newline Tutorial Template</a>.</p></div></div><p>newline supports many of the standard elements you would expect from a rich text editor -- and several unique ones. Let's get the basics out of the way, starting with the essential marks:</p><h2><a name="essential-marks">Essential Marks</a></h2><p>You can, of course create <strong>bold</strong>,<em> italic</em>, and <code>code</code> highlighted inline marks. These can be created by selecting a word and using the inline menu. </p><p>You can type markdown-like syntax for each of these by wrapping a word in two stars <code>**</code> for bold or underscores <code>_</code> for italic. Code highlighted words can be created by surrounding a word with back-ticks. </p><p>These marks make your post much easier to scan. <strong>Use them.</strong></p><div data-panel-type="warning" data-panel-position="inline" class="panel panel-type-warning panel-position-inline"><div class="panel-container lolwut"><p>⚙️ Don't use <code>code</code> highlighting for multi-line code snippets. Instead, use the Code Blocks described below.</p></div></div><h2><a name="links">Links</a></h2><p>You can link to something by selecting the text and clicking the "chain-link" icon in the menu. Here's an <a href="https://www.newline.co/write/newline-formatting-guidelines--286f3a03\" rel="noopener noreferrer nofollow">example of a link</a>. </p><p>You can also type links using a markdown-like syntax. If you type this: <code>[my link](https://newline.co)</code>. Then you'll get a link like this: <a href="https://newline.co" rel="noopener noreferrer nofollow">my link</a>.</p><p>Don't show visible URLs. If you want to link somewhere, use a link.</p><p>❌ You can see on this page <a href="https://mydomain.com/foo" rel="noopener noreferrer nofollow">https://mydomain.com/foo</a> what I'm talking about.</p><p>✅ You can see on <a href="https://newline.co/" rel="noopener noreferrer nofollow">this page</a> what I'm talking about.</p><h1><a name="heading-1">Heading 1.</a></h1><h2><a name="heading-2">Heading 2.</a></h2><h3><a name="heading-3">Heading 3.</a></h3><p></p><p>You can input headings using markdown-like text. Headings can quickly be typed by typing one, two, or three pound (<code>#</code>) characters.</p><p>Use headings for <strong>scannability</strong>. </p><p>Headings help the reader know what's in a section and so <strong>headings should be more than two words</strong>. </p><p>Examples:</p><p>❌ (h2) useLocation hook</p><p>✅ (h2) useLocation - A Hook for Reading the URL</p><h2><a name="lists">Lists</a></h2><p>You can add a list by typing the <code>*</code> character on a new line like this:</p><ul><li><p>Item One</p></li><li><p>Item Two</p></li><li><p>Item Three</p></li></ul><h2><a name="images">Images</a></h2><p>You can add an image by simply dragging it on to the page.</p><figure class="photo figure-position-wide"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20200116032823749_yuriy-chemerys-BTzQWyRK474-unsplash.jpg" attachmentid="6f2d945d-f922-45ec-8687-5f6edf013dd6" contenteditable="false" data-width="3000" data-height="2000"><div></div></figure><p><em>Photo by <a href="https://unsplash.com/@ychemerys?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" rel="noopener noreferrer nofollow">Yuriy Chemerys</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" rel="noopener noreferrer nofollow">Unsplash</a></em></p><p>There are a number of formatting options you can use on the image to make it fit on your page. The fox image above is full-bleed, but you can also create inline or "wide" images.</p><h2><a name="callouts">Callouts</a></h2><p>Sometimes you want to call out a bit of text like this:</p><div data-panel-type="warning" data-panel-position="inline" class="panel panel-type-warning panel-position-inline"><div class="panel-container lolwut"><p>⚠️ Don't jump off a cliff holding only an umbrella.</p></div></div><p>You can create a callout block by using the + plus button on an empty line. </p><p>There are a variety of callout blocks available. To change the callout box type, triple-click on the box and select the type from the menu.</p><div data-panel-type="info" data-panel-position="inline" class="panel panel-type-info panel-position-inline"><div class="panel-container lolwut"><p>👩‍🔬 This is an info callout box.</p></div></div><div data-panel-type="tip" data-panel-position="inline" class="panel panel-type-tip panel-position-inline"><div class="panel-container lolwut"><p>🧞 This is a tip callout box.</p></div></div><div data-panel-type="success" data-panel-position="inline" class="panel panel-type-success panel-position-inline"><div class="panel-container lolwut"><p>🧝 This is an info callout box.</p></div></div><div data-panel-type="warning" data-panel-position="inline" class="panel panel-type-warning panel-position-inline"><div class="panel-container lolwut"><p>🧛 This is a warning callout box.</p></div></div><div data-panel-type="error" data-panel-position="inline" class="panel panel-type-error panel-position-inline"><div class="panel-container lolwut"><p>🦹‍♂️ This is an error callout box.</p></div></div><h2><a name="quotes">Quotes</a></h2><blockquote><p>“Folks are usually about as happy as they make their minds up to be.” <br>- Abraham Lincoln</p></blockquote><h2><a name="code-blocks">Code Blocks</a></h2><p>You can create a code block by typing three backticks in a row. It looks like this:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-wzSZl" id="cm-wzSZl">let reducer: Reducer&lt;AppState&gt; =
  (state: AppState, action: Action): AppState =&gt; {
  switch (action.type) {
  case 'ADD_MESSAGE':
    return {
      messages: state.messages.concat(
        (&lt;AddMessageAction&gt;action).message
      ),
    };</textarea><div data-panel-type="info" data-panel-position="inline" class="panel panel-type-info panel-position-inline"><div class="panel-container lolwut"><p>👩‍🎤 Use a code formatting tool like <a href="https://prettier.io/" rel="noopener noreferrer nofollow">Prettier</a> to format your code.</p></div></div><p>Our recommendation is that you show <strong>no more than 20 lines of code</strong> per code block. Pasting huge amounts of code is confusing. Instead, break it up and explain smaller chunks.</p><h2><a name="embedded-code-blocks">Embedded Code Blocks</a></h2><p>It's also possible to embed code blocks <strong>directly from Github repositories</strong>. This makes it super easy to keep code in one place, but still discuss the code in a blog post, and easily update it when it changes. </p><p>Here's what a Github code embed looks like (notice the link to the repository file):</p><div data-remotecodeblock="true" class="cm-remoteCodeBlock"><div data-codeeditordecorations="true"></div><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-Ce7FQ" id="cm-Ce7FQ">function LightBulb() {
  let [light, setLight] = useState(0);

  const setOff = () =&gt; setLight(0);
  const setOn = () =&gt; setLight(1);

  let fillColor = light === 1 ? "#ffbb73" : "#000000";

  return (
    &lt;div className="App"&gt;
      &lt;div&gt;
        &lt;LightbulbSvg fillColor={fillColor} /&gt;
      &lt;/div&gt;

      &lt;button onClick={setOff}&gt;Off&lt;/button&gt;
      &lt;button onClick={setOn}&gt;On&lt;/button&gt;
    &lt;/div&gt;
  );
}</textarea></div><p><a href="https://www.newline.co/write/embedding-remote-code-in-newline-posts--6f773e61" rel="noopener noreferrer nofollow">Click here to learn how to embed code blocks</a> from Github directly into newline.</p><h2><a name="embeds">Embeds</a></h2><p>You can embed images, videos, audio, and code examples from popular sites. To do this, simply paste the link into the blog post and the embed will be expanded.</p><p>For example, here's an embedded Codepen:</p><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fambiva%2Fembed%2Fpreview%2FmdyjGaY%3Fheight%3D600%26slug-hash%3DmdyjGaY%26default-tabs%3Dcss%2Cresult%26host%3Dhttps%3A%2F%2Fcodepen.io&amp;url=https%3A%2F%2Fcodepen.io%2Fambiva%2Fpen%2FmdyjGaY&amp;image=https%3A%2F%2Fscreenshot.codepen.io%2F3931534.mdyjGaY.small.a08ecf64-4c40-4aa2-93a0-25d5a0d693f5.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codepen" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>And here's a Youtube video:</p><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FUAfl6U43ISw%3Ffeature%3Doembed&amp;url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DUAfl6U43ISw&amp;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FUAfl6U43ISw%2Fhqdefault.jpg&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=youtube" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>Both of these embeds were created by simply pasting the link to the Codepen / Youtube video.</p><h2><a name="summary">Summary </a></h2><p>Anyone can write a post on newline. We have a ton of new features planned to make it the best site to write programming tutorials. Try it out!</p>

AUTHOR

Nate Murray

This document explains the elements available to you when using newline and some recommendations using them. In fact, this text is written in a Summary block.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

newline Formatting Guidelines

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript