initial commit

1 files changed, 48 insertions, 0 deletions

diff --git a/src/old-no-longer-pub/2014-03-26_shell-code-snippets-done-right.txt b/src/old-no-longer-pub/2014-03-26_shell-code-snippets-done-right.txt
new file mode 100644
index 0000000..038b841
--- /dev/null
+++ b/src/old-no-longer-pub/2014-03-26_shell-code-snippets-done-right.txt
@@ -0,0 +1,48 @@
+---
+title: Shell Code Snippets Done Right
+pub_date: 2014-03-26 12:04:25
+slug: /blog/2014/03/shell-code-snippets-done-right
+metadesc: A better way to post shell code samples on your site.
+tags: CSS Tips & Tricks
+code: True
+tutorial: True
+
+---
+
+If you post tutorials online, particularly anything involving shell code, you've inevitably run into the problem where people copy and paste the code and end up including the `$` prompt by mistake.
+
+The code won't work when you do that so your tutorial becomes less helpful. Sometimes people will post a comment wondering what happened, but they're just as likely to decide you don't know what you're talking about and move on.
+
+Even users that know not to copy the `$` have to be careful how when they select your code to avoid accidentally copying it.
+
+You could leave out the `$` to avoid this, but then it can be hard to tell what's a wrapped line versus what's two separate lines of code.
+
+Turn out there's a better way -- you can display the prompt and make sure no one ever selects it thanks to the CSS pseudo class `:before`.
+
+I found [this screenshot][1][^1] in an open tab this morning and thought I'd share what a subtle, but helpful stroke of genius Github has created here:
+
+[![Screenshot of Github source code showing how to use `:before` to add a prompt before shell code][2]](https://longhandpixels.net/media/images/2014/github-prompt-before.jpg "View Image 1")
+: Github's ingenius use of `:before` to display a prompt before shell code snippets
+
+Github is using a pseudo class to prepend command line code with the `$` prompt. It's a great attention to detail -- you get the prompt, but because it's a pseudo element it can't be copied when users copy and paste the code. In most browsers it can't even be selected, which means you don't have to worry when you're highlighting code to copy it.
+
+This site currently uses [Prismjs][3] for code highlighting so Github's exact syntax won't work here, but here's a snippet of CSS to make this work with Prismjs:
+
+~~~.language-css
+code.language-bash:before {
+    content: "$ ";
+}
+~~~
+
+The markdown processor I use adds `language-bash` to both the `pre` and `code` tags, which is why I've used the more specific `code` selector. 
+
+And there you go, a better way to display snippets of shell code on your site.
+
+The main downside I can see is that if/when I roll this out I have to go back and delete all the `$` in my posts. 
+
+[^1]: I have no idea where I found this or how it came to open in my browser. Probably Twitter, but I've been unable to track down who did it since Twitter's search features suck. If you know, post a comment.
+
+
+[1]: http://cl.ly/Ub7p
+[2]: https://longhandpixels.net/media/images/2014/github-prompt-before.jpg
+[3]: http://prismjs.com/