From f5de48f10b5e707d206b59943b1efc3c0cd83ef3 Mon Sep 17 00:00:00 2001 From: JP Hastings-Spital Date: Wed, 30 Oct 2024 09:30:19 +0000 Subject: [PATCH] Code blocks now have dark/light mode styling Went with something fun I found online (ref in scss source) and adapted. --- assets/scss/_buttons.scss | 42 +- assets/scss/_main.scss | 4 - assets/scss/_prism.scss | 561 +++++++----------- config.toml | 1 + content/notes/2024-10-29/5icpu/index.md | 20 +- content/notes/twitter/11753824465/index.md | 2 +- content/posts/link-shortener/index.md | 2 +- .../pretty-json-in-the-terminal.md | 2 +- .../posts/tumblr-musings/ruby-and-jenkins.md | 3 +- .../tumblr-musings/ruby-dlc-on-github.md | 2 +- .../tumblr-musings/where-on-the-web/index.md | 4 +- tools/archive/instagram/README.md | 2 +- tools/archive/twitter/README.md | 2 +- 13 files changed, 238 insertions(+), 409 deletions(-) diff --git a/assets/scss/_buttons.scss b/assets/scss/_buttons.scss index 624e7ee9..c48fdfba 100644 --- a/assets/scss/_buttons.scss +++ b/assets/scss/_buttons.scss @@ -96,44 +96,6 @@ a.button { } } -.code-toolbar { - margin-bottom: 20px; - - .toolbar-item a { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 3px 8px; - margin-bottom: 5px; - text-decoration: none; - text-align: center; - font-size: 13px; - font-weight: 500; - border-radius: 8px; - border: 1px solid transparent; - appearance: none; - cursor: pointer; - outline: none; - // Default - background: $light-background-secondary; - - @media (prefers-color-scheme: dark) { - background: $dark-background-secondary; - color: inherit; - } - - @media (prefers-color-scheme: light) { - background: $light-background-secondary; - } - - [data-theme=dark] & { - background: $dark-background-secondary; - color: inherit; - } - - [data-theme=light] & { - background: $light-background-secondary; - } - } +.code-toolbar .toolbar-item { + display: none; } diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss index fa750dee..2dfe19f2 100644 --- a/assets/scss/_main.scss +++ b/assets/scss/_main.scss @@ -592,10 +592,6 @@ hr { background-position: center center; } -// Prism JS Additionals -.highlight { - margin: 30px auto; -} a[href^="#fn:"] { text-decoration: none; diff --git a/assets/scss/_prism.scss b/assets/scss/_prism.scss index 2227c1e4..f878d408 100644 --- a/assets/scss/_prism.scss +++ b/assets/scss/_prism.scss @@ -1,378 +1,247 @@ -/* PrismJS 1.23.0 -https://prismjs.com/download.html#themes=prism-twilight&languages=markup+css+clike+javascript+ada+apacheconf+bash+batch+c+csharp+cpp+coffeescript+css-extras+dart+django+dns-zone-file+docker+elixir+etlua+erlang+git+go+graphql+groovy+haml+handlebars+haskell+http+hpkp+hsts+ini+java+javadoc+javadoclike+jsdoc+js-extras+json+json5+jsonp+julia+kotlin+latex+less+lisp+lua+markup-templating+matlab+nginx+objectivec+perl+php+phpdoc+php-extras+powershell+promql+protobuf+puppet+purescript+python+r+jsx+tsx+regex+rest+ruby+rust+sass+scss+shell-session+sql+stylus+swift+toml+twig+typescript+typoscript+verilog+vhdl+vim+visual-basic+wasm+xml-doc+yaml&plugins=line-highlight+line-numbers+show-language+toolbar */ -/** - * prism.js Twilight theme - * Based (more or less) on the Twilight theme originally of Textmate fame. - * @author Remy Bach - */ +// https://codepen.io/2kool2/pen/MEbeEg + +pre[class*="language-"] { + overflow: auto; + margin: 0; + background-color: transparent; + + /* Allow space for an overflow ellipsis */ + padding-right: 0.5rem; + + /* Allow space for SVG "tear off strip" */ + background-origin: border-box; + border-left: 1.25rem solid transparent; + background-size: auto 2.926rem; + /* Single line does not sit on stripes */ + background-position: top 2.1rem left 0; + + /* Allow horizontal resizing - could be adjusted to allow vertical resizing too */ + position: relative; + resize: horizontal; + min-width: calc(100% - 3.5rem); + width: calc(100% + 2.5rem); + left: -2.5rem; + + transition: box-shadow .3s ease-out; +} + +code[class*="language-"] { + font-family: monospace, monospace; + text-shadow: 0 1px var(--textShadow); + letter-spacing: 0.01em; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + + /* Safari requirement for contenteditable */ + word-wrap: normal; + line-height: 1.54; + tab-size: 2; + hyphens: none; +} + +pre > code[class*="language-"], +pre[class*="language-"] > code { + display: block; + padding: 0; + + /* Use an ellipsis to indicate code is wider than the display area */ + text-overflow: ellipsis; + overflow-x: scroll; +} +pre:hover > code[class*="language-"], +pre:focus-within > code[class*="language-"] { + outline: none; + text-overflow: inherit; +} + +/* Inline code only */ +:not(pre) > code[class*="language-"] { + font-size: inherit; + background-position: top right; + background-size: auto 4rem; + padding: 0.125em 0.25em; + white-space: normal; + word-wrap: nowrap; +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} +.token.entity { + cursor: help; +} +.namespace { + opacity: 0.7; +} + +/* Default colors (Light mode) */ +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + --color: #33a; + --textShadow: #fff; + --comment: #6e6e6e; + --punctuation: #4e4e4e; + --property: #905; + --operator: #70b; + --selector: #487b00; + --url: #8d6640; + --urlBg: hsla(0, 0%, 100%, .5); + --boolean: #905; + --atrule: #0075a8; + --keyword: #0075a8; + --function: #c93654; + --regex: #860; + --boxShadow: hsla(0,0%,0%,.3); + --focusOutline: hsla(214, 100%, 85%, 1); + + --codeBgImg: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 64'%3E%3Ccircle stroke='rgba(0,64,0,.3)' stroke-width='2' fill='none' cx='20' cy='49' r='12'/%3E%3Cpath fill='%23fcfcfa' fill-rule='evenodd' d='M1920 64H0V0h1920v64zM20 36a11 11 0 110 22 11 11 0 010-22z'/%3E%3Cpath stroke='%23edf3ed' stroke-width='2' d='M0 1h1920M0 5h1920M0 9h1920M0 13h1920M0 17h1920M0 21h1920M0 25h1920M0 29h1920'/%3E%3Cpath stroke='%23e4ede4' stroke-dasharray='2 6 2 6' stroke-width='2' d='M40 2v60'/%3E%3C/svg%3E"); +} + + +/* If the OS has dark mode set then... */ +/* Change dark to light to test */ + +@media (prefers-color-scheme: dark) { + body:not([data-lightMode="light"]) code[class*="language-"]:not([contenteditable]), + body:not([data-lightMode="light"]) pre[class*="language-"] { + --color: #6ae; + --textShadow: #000; + + --comment: #9ab; + --punctuation: #ccc; + --property: #e70; + --operator: #d7f; + --selector: #8b2; + --url: #cde; + --urlBg: rgba(0,0,0,.5); + --boolean: #a8f; + --atrule: #ffb; + --keyword: #fe6; + --function: #f55; + --regex: #f91; + + --boxShadow: #000; + --focusOutline: hsla(214, 100%, 85%, .6); + + --codeBgImg: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 64'%3E%3Ccircle stroke='rgba(0,0,0,.7)' stroke-width='2' fill='none' cx='20' cy='49' r='12'/%3E%3Cpath fill='%23101610' fill-rule='evenodd' d='M1920 64H0V0h1920v64zM20 36a11 11 0 110 22 11 11 0 010-22z'/%3E%3Cpath stroke='%23121' stroke-width='2' d='M0 1h1920M0 5h1920M0 9h1920M0 13h1920M0 17h1920M0 21h1920M0 25h1920M0 29h1920'/%3E%3Cpath stroke='%23131' stroke-dasharray='2 6 2 6' stroke-width='2' d='M40 2v60'/%3E%3C/svg%3E"); + } +} + +/* Manual switch mode - where implemented */ +body[data-lightMode="dark"] code[class*="language-"]:not([contenteditable]), +body[data-lightMode="dark"] pre[class*="language-"] { + + /* Exactly the same as prefers-color-scheme: dark */ + --color: #6ae; + --textShadow: #000; + + --comment: #9ab; + --punctuation: #ccc; + --property: #e70; + --operator: #d7f; + --selector: #8b2; + --url: #cde; + --urlBg: rgba(0,0,0,.5); + --boolean: #8af; + --atrule: #ffb; + --keyword: #fe6; + --function: #f55; + --regex: #f91; + + --boxShadow: #000; + --focusOutline: hsla(214, 100%, 85%, .6); + + --codeBgImg: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 64'%3E%3Ccircle stroke='rgba(0,0,0,.7)' stroke-width='2' fill='none' cx='20' cy='49' r='12'/%3E%3Cpath fill='%23101610' fill-rule='evenodd' d='M1920 64H0V0h1920v64zM20 36a11 11 0 110 22 11 11 0 010-22z'/%3E%3Cpath stroke='%23121' stroke-width='2' d='M0 1h1920M0 5h1920M0 9h1920M0 13h1920M0 17h1920M0 21h1920M0 25h1920M0 29h1920'/%3E%3Cpath stroke='%23131' stroke-dasharray='2 6 2 6' stroke-width='2' d='M40 2v60'/%3E%3C/svg%3E"); +} + + + code[class*="language-"], pre[class*="language-"] { - color: white; - background: none; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - font-size: 1em; - text-align: left; - text-shadow: 0 -.1em .2em black; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - line-height: 1.5; - - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; + color: var(--color); + text-shadow: 0 1px var(--textShadow); } -pre[class*="language-"], -:not(pre) > code[class*="language-"] { - background: hsl(0, 0%, 8%); /* #141414 */ -} - -/* Code blocks */ +/* Background image is applied to the pre element on blocks, mainly because it is cropped when applied to the code element. */ +:not(pre) > code[class*="language-"], pre[class*="language-"] { - border-radius: .5em; - border: .3em solid hsl(0, 0%, 33%); /* #282A2B */ - box-shadow: 1px 1px .5em black inset; - margin: .5em 0; - overflow: auto; - padding: 1em; + background-image: var(--codeBgImg); } - -pre[class*="language-"]::-moz-selection { - /* Firefox */ - background: hsl(200, 4%, 16%); /* #282A2B */ +pre[class*="language-"]:hover, +pre[class*="language-"]:focus-within { + box-shadow: 0 .25rem .25rem var(--boxShadow); } - -pre[class*="language-"]::selection { - /* Safari */ - background: hsl(200, 4%, 16%); /* #282A2B */ -} - -/* Text Selection colour */ -pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, -code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { - text-shadow: none; - background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */ -} - -pre[class*="language-"]::selection, pre[class*="language-"] ::selection, -code[class*="language-"]::selection, code[class*="language-"] ::selection { - text-shadow: none; - background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */ -} - -/* Inline code */ -:not(pre) > code[class*="language-"] { - border-radius: .3em; - border: .13em solid hsl(0, 0%, 33%); /* #545454 */ - box-shadow: 1px 1px .3em -.1em black inset; - padding: .15em .2em .05em; - white-space: normal; +pre[class*="language-"]:focus-within { + outline-offset: calc(-0.25rem - 1px); + outline: var(--focusOutline) solid 0.25rem; + z-index: 5; } .token.comment, .token.prolog, .token.doctype, .token.cdata { - color: hsl(0, 0%, 47%); /* #777777 */ + color: var(--comment); } - .token.punctuation { - opacity: .7; + color: var(--punctuation); } - -.token.namespace { - opacity: .7; -} - -.token.tag, -.token.boolean, -.token.number, -.token.deleted { - color: hsl(14, 58%, 55%); /* #CF6A4C */ -} - -.token.keyword, .token.property, -.token.selector, -.token.constant, .token.symbol, -.token.builtin { - color: hsl(53, 89%, 79%); /* #F9EE98 */ +.token.tag, +.token.constant, +.token.deleted { + color: var(--property); } - +.token.boolean, +.token.number { + color: var(--boolean); +} +.token.selector, .token.attr-name, -.token.attr-value, .token.string, .token.char, -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string, -.token.variable, +.token.builtin, .token.inserted { - color: hsl(76, 21%, 52%); /* #8F9D6A */ + color: var(--selector); } - -.token.atrule { - color: hsl(218, 22%, 55%); /* #7587A6 */ +.token.operator { + color: var(--operator); +} +.token.url, +.token.entity, +.language-css .token.string, +.style .token.string { + color: var(--url); + background-color: var(--urlBg); +} +.token.atrule, +.token.attr-value { + color: var(--atrule); +} +.token.keyword { + color: var(--keyword); +} +.token.function { + color: var(--function); } - .token.regex, -.token.important { - color: hsl(42, 75%, 65%); /* #E9C062 */ -} - .token.important, -.token.bold { - font-weight: bold; -} -.token.italic { - font-style: italic; +.token.variable { + color: var(--regex); } -.token.entity { - cursor: help; -} -pre[data-line] { - padding: 1em 0 1em 3em; - position: relative; -} - -/* Markup */ -.language-markup .token.tag, -.language-markup .token.attr-name, -.language-markup .token.punctuation { - color: hsl(33, 33%, 52%); /* #AC885B */ -} - -/* Make the tokens sit above the line highlight so the colours don't look faded. */ -.token { - position: relative; - z-index: 1; -} - -.line-highlight { - background: hsla(0, 0%, 33%, 0.25); /* #545454 */ - background: linear-gradient(to right, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */ - border-bottom: 1px dashed hsl(0, 0%, 33%); /* #545454 */ - border-top: 1px dashed hsl(0, 0%, 33%); /* #545454 */ - left: 0; - line-height: inherit; - margin-top: 0.75em; /* Same as .prism’s padding-top */ - padding: inherit 0; - pointer-events: none; - position: absolute; - right: 0; - white-space: pre; - z-index: 0; -} - -.line-highlight:before, -.line-highlight[data-end]:after { - background-color: hsl(215, 15%, 59%); /* #8794A6 */ - border-radius: 999px; - box-shadow: 0 1px white; - color: hsl(24, 20%, 95%); /* #F5F2F0 */ - content: attr(data-start); - font: bold 65%/1.5 sans-serif; - left: .6em; - min-width: 1em; - padding: 0 .5em; - position: absolute; - text-align: center; - text-shadow: none; - top: .4em; - vertical-align: .3em; -} - -.line-highlight[data-end]:after { - bottom: .4em; - content: attr(data-end); - top: auto; -} - -pre[data-line] { - position: relative; - padding: 1em 0 1em 3em; -} - -.line-highlight { - position: absolute; - left: 0; - right: 0; - padding: inherit 0; - margin-top: 1em; /* Same as .prism’s padding-top */ - - background: hsla(24, 20%, 50%,.08); - background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); - - pointer-events: none; - - line-height: inherit; - white-space: pre; -} @media print { - .line-highlight { - /* - * This will prevent browsers from replacing the background color with white. - * It's necessary because the element is layered on top of the displayed code. - */ - -webkit-print-color-adjust: exact; - color-adjust: exact; - } -} - - .line-highlight:before, - .line-highlight[data-end]:after { - content: attr(data-start); - position: absolute; - top: .4em; - left: .6em; - min-width: 1em; - padding: 0 .5em; - background-color: hsla(24, 20%, 50%,.4); - color: hsl(24, 20%, 95%); - font: bold 65%/1.5 sans-serif; - text-align: center; - vertical-align: .3em; - border-radius: 999px; - text-shadow: none; - box-shadow: 0 1px white; - } - - .line-highlight[data-end]:after { - content: attr(data-end); - top: auto; - bottom: .4em; - } - -.line-numbers .line-highlight:before, -.line-numbers .line-highlight:after { - content: none; -} - -pre[id].linkable-line-numbers span.line-numbers-rows { - pointer-events: all; -} -pre[id].linkable-line-numbers span.line-numbers-rows > span:before { - cursor: pointer; -} -pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { - background-color: rgba(128, 128, 128, .2); -} - -pre[class*="language-"].line-numbers { - position: relative; - padding-left: 3.8em; - counter-reset: linenumber; -} - -pre[class*="language-"].line-numbers > code { - position: relative; - white-space: inherit; -} - -.line-numbers .line-numbers-rows { - position: absolute; - pointer-events: none; - top: 0; - font-size: 100%; - left: -3.8em; - width: 3em; /* works for line-numbers below 1000 lines */ - letter-spacing: -1px; - border-right: 1px solid #999; - - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -} - - .line-numbers-rows > span { - display: block; - counter-increment: linenumber; - } - - .line-numbers-rows > span:before { - content: counter(linenumber); - color: #999; - display: block; - padding-right: 0.8em; - text-align: right; - } - -div.code-toolbar { - position: relative; -} - -div.code-toolbar > .toolbar { - position: absolute; - top: .3em; - right: .2em; - transition: opacity 0.3s ease-in-out; - opacity: 0; -} - -div.code-toolbar:hover > .toolbar { - opacity: 1; -} - -/* Separate line b/c rules are thrown out if selector is invalid. - IE11 and old Edge versions don't support :focus-within. */ -div.code-toolbar:focus-within > .toolbar { - opacity: 1; -} - -div.code-toolbar > .toolbar .toolbar-item { - display: inline-block; -} - -div.code-toolbar > .toolbar a { - cursor: pointer; -} - -div.code-toolbar > .toolbar button { - background: none; - border: 0; - color: inherit; - font: inherit; - line-height: normal; - overflow: visible; - padding: 0; - -webkit-user-select: none; /* for button */ - -moz-user-select: none; - -ms-user-select: none; -} - -div.code-toolbar > .toolbar a, -div.code-toolbar > .toolbar button, -div.code-toolbar > .toolbar span { - color: #bbb; - font-size: .8em; - padding: 0 .5em; - background: #f5f2f0; - background: rgba(224, 224, 224, 0.2); - box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); - border-radius: .5em; -} - -div.code-toolbar > .toolbar a:hover, -div.code-toolbar > .toolbar a:focus, -div.code-toolbar > .toolbar button:hover, -div.code-toolbar > .toolbar button:focus, -div.code-toolbar > .toolbar span:hover, -div.code-toolbar > .toolbar span:focus { - color: inherit; - text-decoration: none; -} + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} \ No newline at end of file diff --git a/config.toml b/config.toml index 63d8b687..3424436c 100644 --- a/config.toml +++ b/config.toml @@ -3,6 +3,7 @@ timeout = "300s" PygmentsCodeFences = true PygmentsStyle = "monokai" +PygmentsUseClasses = true enableRobotsTXT = true enableGitInfo = true diff --git a/content/notes/2024-10-29/5icpu/index.md b/content/notes/2024-10-29/5icpu/index.md index de4a989e..470dfe7a 100644 --- a/content/notes/2024-10-29/5icpu/index.md +++ b/content/notes/2024-10-29/5icpu/index.md @@ -1,16 +1,16 @@ ---- -date: 2024-10-29T10:35:52.127Z -publishDate: 2024-10-29T10:35:52.127Z -tags: - - overmind - - rails ---- - +--- +date: 2024-10-29T10:35:52.127Z +publishDate: 2024-10-29T10:35:52.127Z +tags: + - overmind + - rails +--- + I just threw together a script for easily attaching a debugger to any of your [overmind](/tags/overmind) run processes. let me know if it's useful! I'm using it for attaching to my [rails](/tags/rails) processes, as I don't like how `overmind connect web` echoes _everything_ the web process outputs. -```sh bin/debug +```bash bin/debug #!/usr/bin/env sh if [[ "$1" == "--help" ]]; then @@ -27,4 +27,4 @@ DEBUGGER_PID=$(pgrep -P $PROCESS_PID) [[ -z $DEBUGGER_PID ]] && { echo "The $PROCESS process doesn't seem to have any child processes" >&2; exit 1; } bundle exec rdbg -An "rdbg-$DEBUGGER_PID" -``` +``` diff --git a/content/notes/twitter/11753824465/index.md b/content/notes/twitter/11753824465/index.md index f03f73be..35fbd506 100644 --- a/content/notes/twitter/11753824465/index.md +++ b/content/notes/twitter/11753824465/index.md @@ -8,6 +8,6 @@ I've released Thimblr: [toys.byJP.me/thimblr](https://github.com/jphastings/thim A tool to help you make tumblr themes. -```sh +```bash gem install Thimblr ``` diff --git a/content/posts/link-shortener/index.md b/content/posts/link-shortener/index.md index 013e4e9c..80799df5 100644 --- a/content/posts/link-shortener/index.md +++ b/content/posts/link-shortener/index.md @@ -93,7 +93,7 @@ If you'd also like an API to add a new shortlink, you'll need a [val.town](https 3. And another again with `export const shortlink_repo = 'yourghname/your.tld'` in it, referring to your github repo. 4. You can now send a query like below to have a new shortlink added to your repo! - ```sh + ```bash curl "https://yourvtname-addshortlink.express.val.run/example?to=http://example.com" \ -H 'Authorization: Bearer abc123 ``` diff --git a/content/posts/tumblr-musings/pretty-json-in-the-terminal.md b/content/posts/tumblr-musings/pretty-json-in-the-terminal.md index 43a1efcd..847e61f9 100644 --- a/content/posts/tumblr-musings/pretty-json-in-the-terminal.md +++ b/content/posts/tumblr-musings/pretty-json-in-the-terminal.md @@ -14,7 +14,7 @@ This was _exactly_ what I was looking for. If you're investingating JSON returned from a web service, get the control you need with the terminal and [jsonpp](https://github.com/jmhodges/jsonpp): -```sh +```bash brew install jsonpp curl -u username:password https://awesome.com/stuff.json | jsonpp ``` diff --git a/content/posts/tumblr-musings/ruby-and-jenkins.md b/content/posts/tumblr-musings/ruby-and-jenkins.md index 1faf2ede..f3da1301 100644 --- a/content/posts/tumblr-musings/ruby-and-jenkins.md +++ b/content/posts/tumblr-musings/ruby-and-jenkins.md @@ -16,7 +16,7 @@ It took me a while to figure out the problem, essentially Jenkins loads a sessio My Jenkins executed shell script now looks like this, note the PATH and LANG exports! -```sh +```bash export LANG=en_GB.UTF-8 export PATH=/Users/admin/.rvm/gems/ruby-1.9.3-p385/bin:/Users/admin/.rvm/gems/ruby-1.9.3-p385@global/bin:/Users/admin/.rvm/rubies/ruby-1.9.3-p385/bin:/Users/admin/.rvm/bin:/usr/local/bin:$PATH rvm use 1.9.3 --install --binary --fuzzy @@ -26,3 +26,4 @@ gem --version rake spec rake features ``` + diff --git a/content/posts/tumblr-musings/ruby-dlc-on-github.md b/content/posts/tumblr-musings/ruby-dlc-on-github.md index 0c94ffab..4fac0f1f 100644 --- a/content/posts/tumblr-musings/ruby-dlc-on-github.md +++ b/content/posts/tumblr-musings/ruby-dlc-on-github.md @@ -16,7 +16,7 @@ tags: Ruby-DLC is now available on github, and consequently as a gem! You can install with[^1]: -```sh +```bash gem sources -a https://gems.github.com sudo gem install jphastings-dlc ``` diff --git a/content/posts/tumblr-musings/where-on-the-web/index.md b/content/posts/tumblr-musings/where-on-the-web/index.md index ce577f5b..165eb7f0 100644 --- a/content/posts/tumblr-musings/where-on-the-web/index.md +++ b/content/posts/tumblr-musings/where-on-the-web/index.md @@ -24,7 +24,7 @@ I’ve uploaded a snapshot[^1] of the whole window for you to ogle at too. If you want to play with the code, get ruby installed and then just do: -```sh +```bash gem install ruby-processing ``` @@ -32,7 +32,7 @@ or follow [the advice here](https://github.com/jashkenas/ruby-processing/wiki/ge Then download the code from [the gist](https://gist.github.com/98878), find an equirectangular map of the earth, call it `map.jpg` and then run: -```sh +```bash rp5 run whereOnTheWeb.rb ``` diff --git a/tools/archive/instagram/README.md b/tools/archive/instagram/README.md index 6b59a7bf..8abe3cc9 100644 --- a/tools/archive/instagram/README.md +++ b/tools/archive/instagram/README.md @@ -2,7 +2,7 @@ This tool will take an [Instagram data archive](https://help.instagram.com/181231772500920) and turn it into a series of timestamped posts for your Hugo blog. -```sh +```bash go run . ``` diff --git a/tools/archive/twitter/README.md b/tools/archive/twitter/README.md index 6b30a960..bb452df8 100644 --- a/tools/archive/twitter/README.md +++ b/tools/archive/twitter/README.md @@ -2,7 +2,7 @@ This tool will take a Twitter archive (I'd link to how to get there, but I don't have an account any more, so can't!) and turn it into a series of timestamped notes for your Hugo blog. -```sh +```bash go run . ```