The newline blogging system allows you to embed code directly from existing repositories. This post shows how it's done.

 and authenticate with Github. This allows newline API access to your repositories.

Step 1. Find the Github Code You Want to Embed

Then click on the starting line number on the left, hold down shift, and click the ending line number.

This will update the anchor in the URL to include these line numbers:

Step 2. Copy and Paste that URL into Newline

Here's what it will look like when it's done:

  return (
    <div className="App">
      <div>
        <LightbulbSvg fillColor={fillColor} />
      </div>

      <button onClick={setOff}>Off</button>
      <button onClick={setOn}>On</button>
    </div>
  );

<h1 data-node-type="titlePlaceholder">Embedding Remote Code in newline Posts</h1><div data-node-type="summary" class="summary-block">The newline blogging system allows you to embed code directly from existing repositories. This post shows how it's done.</div><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.loom.com%2Fembed%2F9e8805779cda4f5fa4b52674bb5a8d71&amp;url=https%3A%2F%2Fwww.loom.com%2Fshare%2F9e8805779cda4f5fa4b52674bb5a8d71&amp;image=https%3A%2F%2Fcdn.loom.com%2Fsessions%2Fthumbnails%2F9e8805779cda4f5fa4b52674bb5a8d71-00001.gif&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=loom" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p></p><h2>Step 0. Authenticate with Github</h2><p>Head over to <a href="https://newline.co/my/settings" rel="noopener noreferrer nofollow">your settings</a> and authenticate with Github. This allows newline API access to your repositories.</p><figure class="photo figure-position-hang"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20191021203705608_Screenshot%202019-10-21%2015.25.18.png" attachmentid="01293781-5024-45c7-8514-eb661863355c" contenteditable="false" data-width="1170" data-height="386"><div></div></figure><h2>Step 1. Find the Github Code You Want to Embed</h2><p>For example, we can load code from <a href="https://fullstackio/awesome-fullstack-tutorials/blob/master/react/guide-to-using-react-hooks/code/01-react-hooks-usestate/src/index.js" rel="noopener noreferrer nofollow">this repository</a>. </p><p>Then click on the starting line number on the left, hold down shift, and click the ending line number.</p><figure class="photo figure-position-hang"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20191021204217842_Screenshot%202019-10-21%2015.42.04.png" attachmentid="20a6bf6d-c683-4989-968a-8cd96ef4ffd0" contenteditable="false" data-width="1042" data-height="408"><div></div></figure><p>This will update the anchor in the URL to include these line numbers:</p><figure class="photo figure-position-hang"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20191021204019238_Screenshot%202019-10-21%2015.26.07.png" attachmentid="3353268a-bebc-4d35-a64e-a52547d17540" contenteditable="false" data-width="1138" data-height="508"><div></div></figure><p></p><h2>Step 2. Copy and Paste that URL into Newline</h2><p>Here's what it will look like when it's done:</p><div data-remotecodeblock="true" class="cm-remoteCodeBlock"><div data-codeeditordecorations="true"></div><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-undefined" id="cm-undefined">  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>

AUTHOR

Nate Murray

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Embedding Remote Code in newline Posts</h1><div data-node-type="summary" class="summary-block">The newline blogging system allows you to embed code directly from existing repositories. This post shows how it's done.</div><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.loom.com%2Fembed%2F9e8805779cda4f5fa4b52674bb5a8d71&amp;url=https%3A%2F%2Fwww.loom.com%2Fshare%2F9e8805779cda4f5fa4b52674bb5a8d71&amp;image=https%3A%2F%2Fcdn.loom.com%2Fsessions%2Fthumbnails%2F9e8805779cda4f5fa4b52674bb5a8d71-00001.gif&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=loom" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin" allowtransparency="true" scrolling="no" class="wistia_embed m-0" name="wistia_embed" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" oallowfullscreen="true" msallowfullscreen="true"></iframe><div></div></div><p></p><h2 class="heading-anchor-text" id="step-0.-authenticate-with-github"><span>Step 0. Authenticate with Github</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#step-0.-authenticate-with-github">#</a></h2><p>Head over to <a href="https://www.newline.co/my/settings" target="_blank" rel="noopener noreferrer nofollow">your settings</a> and authenticate with Github. This allows newline API access to your repositories.</p><figure class="photo figure-position-hang"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20191021203705608_Screenshot%202019-10-21%2015.25.18.png" attachmentid="01293781-5024-45c7-8514-eb661863355c" contenteditable="false" data-width="1170" data-height="386"><div></div></figure><h2 class="heading-anchor-text" id="step-1.-find-the-github-code-you-want-to-embed"><span>Step 1. Find the Github Code You Want to Embed</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#step-1.-find-the-github-code-you-want-to-embed">#</a></h2><p>For example, we can load code from <a href="https://github.com/fullstackio/awesome-fullstack-tutorials/blob/master/react/guide-to-using-react-hooks/code/01-react-hooks-usestate/src/index.js" target="_blank" rel="noopener noreferrer nofollow">this repository</a>. </p><p>Then click on the starting line number on the left, hold down shift, and click the ending line number.</p><figure class="photo figure-position-hang"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20191021204217842_Screenshot%202019-10-21%2015.42.04.png" attachmentid="20a6bf6d-c683-4989-968a-8cd96ef4ffd0" contenteditable="false" data-width="1042" data-height="408"><div></div></figure><p>This will update the anchor in the URL to include these line numbers:</p><figure class="photo figure-position-hang"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20191021204019238_Screenshot%202019-10-21%2015.26.07.png" attachmentid="3353268a-bebc-4d35-a64e-a52547d17540" contenteditable="false" data-width="1138" data-height="508"><div></div></figure><p></p><h2 class="heading-anchor-text" id="step-2.-copy-and-paste-that-url-into-newline"><span>Step 2. Copy and Paste that URL into Newline</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#step-2.-copy-and-paste-that-url-into-newline">#</a></h2><p>Here's what it will look like when it's done:</p><div data-remotecodeblock="true" class="cm-remoteCodeBlock"><div data-codeeditordecorations="true"></div><div style="
          min-height: 256px;
          max-width: 100%;
            "><textarea data-iscodemirror="true" class="d-none" data-mode="text/jsx" data-uniqueid="cm-HinWu" id="cm-HinWu">  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></div>

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Embedding Remote Code in newline Posts

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript