|
|
@ -9,9 +9,9 @@ export default () => (
|
|
|
|
<p>Carbon lets you create and share beautiful images of your source code</p>
|
|
|
|
<p>Carbon lets you create and share beautiful images of your source code</p>
|
|
|
|
<p>
|
|
|
|
<p>
|
|
|
|
You know all of those code screenshots you see on Twitter? Although the code's
|
|
|
|
You know all of those code screenshots you see on Twitter? Although the code's
|
|
|
|
usually impressive, we thought there was room for improvement in the aesthetic
|
|
|
|
usually impressive, we thought there was room for improvement in the aesthetic department.
|
|
|
|
department. So what are you waiting for? Go try it out and impress all your developer and
|
|
|
|
So what are you waiting for? Go try it out and impress all your developer and designer
|
|
|
|
designer friends.{' '}
|
|
|
|
friends.{' '}
|
|
|
|
<span role="img" aria-label="Palette">
|
|
|
|
<span role="img" aria-label="Palette">
|
|
|
|
🎨
|
|
|
|
🎨
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
@ -32,7 +32,7 @@ export default () => (
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="mb4">
|
|
|
|
<div className="mb4">
|
|
|
|
<h2>How do I use it?</h2>
|
|
|
|
<h2>How do I use it?</h2>
|
|
|
|
<h4 className="mb0">Import</h4>
|
|
|
|
<h4 className="mb0 mt3">Import</h4>
|
|
|
|
<p className="mb1 mt2">There are a few different ways to import code into Carbon:</p>
|
|
|
|
<p className="mb1 mt2">There are a few different ways to import code into Carbon:</p>
|
|
|
|
<ul className="mt0 mb3">
|
|
|
|
<ul className="mt0 mb3">
|
|
|
|
<li>Drop a file into the editor</li>
|
|
|
|
<li>Drop a file into the editor</li>
|
|
|
@ -45,7 +45,7 @@ export default () => (
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
<li>Paste your code directly</li>
|
|
|
|
<li>Paste your code directly</li>
|
|
|
|
</ul>
|
|
|
|
</ul>
|
|
|
|
<h4 className="mb0">Customization</h4>
|
|
|
|
<h4 className="mb0 mt4">Customization</h4>
|
|
|
|
<p className="mt2 mb3">
|
|
|
|
<p className="mt2 mb3">
|
|
|
|
Once you've got all of your code into Carbon, you can customize your image by
|
|
|
|
Once you've got all of your code into Carbon, you can customize your image by
|
|
|
|
changing the syntax theme, background color/image, window theme, or padding.
|
|
|
|
changing the syntax theme, background color/image, window theme, or padding.
|
|
|
@ -54,7 +54,7 @@ export default () => (
|
|
|
|
You can even drop an image file onto the editor to set the background to that image. Give
|
|
|
|
You can even drop an image file onto the editor to set the background to that image. Give
|
|
|
|
it a try!
|
|
|
|
it a try!
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
<h4 className="mb0">Export/Sharing</h4>
|
|
|
|
<h4 className="mb0 mt4">Export/Sharing</h4>
|
|
|
|
<p className="mt2 mb3">
|
|
|
|
<p className="mt2 mb3">
|
|
|
|
After you've customized your image you can Tweet a link to the image, or save it
|
|
|
|
After you've customized your image you can Tweet a link to the image, or save it
|
|
|
|
directly.
|
|
|
|
directly.
|
|
|
@ -91,8 +91,12 @@ export default () => (
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<style jsx>
|
|
|
|
<style jsx>
|
|
|
|
{`
|
|
|
|
{`
|
|
|
|
h4 {
|
|
|
|
.about {
|
|
|
|
font-weight: 600;
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
|
|
font-size: 32px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
p,
|
|
|
|
p,
|
|
|
|