1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-17 19:25:32 -04:00

syntax highlighting!

This commit is contained in:
2019-04-22 11:26:16 -04:00
parent a00014d33a
commit b4953407ee
6 changed files with 86 additions and 15 deletions

View File

@@ -8,6 +8,9 @@ disableFastRender = true
disableHugoGeneratorInject = true # don't worry, inserted manually :) disableHugoGeneratorInject = true # don't worry, inserted manually :)
disableKinds = ["taxonomy", "taxonomyTerm"] disableKinds = ["taxonomy", "taxonomyTerm"]
pygmentsUseClasses = true
pygmentsCodeFences = true
enableGitInfo = true enableGitInfo = true
[taxonomies] [taxonomies]

View File

@@ -11,7 +11,7 @@ tags:
draft: false draft: false
--- ---
If you examine [my homepage](https://jarv.is/) long enough, you might notice the 👋 hand emoji at the top subtly waving at you. This was easily accomplished using a few lines of CSS with a feature called [`@keyframes`](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) -- no bulky GIFs involved, and no messy JS or jQuery overkill required. If you examine [my homepage](https://jarv.is/) long enough, you might notice the 👋 hand emoji at the top subtly waving at you. This was easily accomplished using a few lines of CSS with a feature called [`@keyframes`](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) -- no awkward GIFs involved, and no messy JS or jQuery overkill required.
Below are the code snippets you can grab and customize to make your own Below are the code snippets you can grab and customize to make your own
["waving hand" 👋](https://emojipedia.org/waving-hand-sign/) emojis ***actually wave***, and a [CodePen playground](https://codepen.io/jakejarvis/pen/pBZWZw) for live testing. ["waving hand" 👋](https://emojipedia.org/waving-hand-sign/) emojis ***actually wave***, and a [CodePen playground](https://codepen.io/jakejarvis/pen/pBZWZw) for live testing.
@@ -20,11 +20,11 @@ Below are the code snippets you can grab and customize to make your own
### CSS: ### CSS:
``` ```css
span#wave { span#wave {
animation-name: wave-animation; /* refers to the name of your @keyframes element below */ animation-name: wave-animation; /* refers to the name of your @keyframes element below */
animation-duration: 2.5s; /* change to speed up or slow down */ animation-duration: 2.5s; /* change to speed up or slow down */
animation-iteration-count: infinite; /* never stop waving! */ animation-iteration-count: infinite; /* never stop waving! :) */
transform-origin: 70% 70%; transform-origin: 70% 70%;
display: inline-block; display: inline-block;
} }
@@ -42,10 +42,10 @@ span#wave {
### HTML: ### HTML:
``` ```html
<span id="wave">👋</span> <span id="wave">👋</span>
``` ```
That's it! Different hand variations and skin tones can be [found on 📕Emojipedia](https://emojipedia.org/search/?q=waving+hand). That's it! All skin tones and different hands can be [found on 📕Emojipedia](https://emojipedia.org/search/?q=waving+hand).
👋🏼 Toodles! 👋🏼 Toodles!

View File

@@ -101,7 +101,7 @@ I removed the company's name because an important part of responsible *disclosur
The `poc-d4ca9e8ceb.html` proof-of-concept file contained this single, hidden line: The `poc-d4ca9e8ceb.html` proof-of-concept file contained this single, hidden line:
``` ```html
<!-- subdomain takeover POC by @jakejarvis on Bugcrowd --> <!-- subdomain takeover POC by @jakejarvis on Bugcrowd -->
``` ```

View File

@@ -26,7 +26,7 @@ If you run your own server, these can be added by way of your Apache or nginx co
The following script can be added as a Worker and customized to your needs. Some can be extremely picky with syntax, so be sure to [read the documentation](https://www.netsparker.com/whitepaper-http-security-headers/) carefully. You can fiddle with it in [the playground](https://cloudflareworkers.com/), too. Simply modify the current headers to your needs, or add new ones to the `newHeaders` or `removeHeaders` arrays. The following script can be added as a Worker and customized to your needs. Some can be extremely picky with syntax, so be sure to [read the documentation](https://www.netsparker.com/whitepaper-http-security-headers/) carefully. You can fiddle with it in [the playground](https://cloudflareworkers.com/), too. Simply modify the current headers to your needs, or add new ones to the `newHeaders` or `removeHeaders` arrays.
``` ```js
let newHeaders = { let newHeaders = {
"Content-Security-Policy": "default-src 'self'; upgrade-insecure-requests", "Content-Security-Policy": "default-src 'self'; upgrade-insecure-requests",
"Strict-Transport-Security" : "max-age=1000", "Strict-Transport-Security" : "max-age=1000",

View File

@@ -7,11 +7,12 @@
<div class="meta"> <div class="meta">
by <span itemprop="author" itemscope itemtype="http://schema.org/Person" class="p-author"><a itemprop="url" rel="me author" href="{{ .Site.BaseURL }}" title="Jake Jarvis" class="h-card"><span itemprop="name" class="p-name">Jake Jarvis</span></a></span> &middot; by <span itemprop="author" itemscope itemtype="http://schema.org/Person" class="p-author"><a itemprop="url" rel="me author" href="{{ .Site.BaseURL }}" title="Jake Jarvis" class="h-card"><span itemprop="name" class="p-name">Jake Jarvis</span></a></span> &middot;
<a href="{{ .Permalink }}"><time itemprop="datePublished" content="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="dt-published">{{ .Date.Format "January 2, 2006" }}</time></a> &middot; <a href="{{ .Permalink }}"><time itemprop="datePublished" content="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="dt-published">{{ .Date.Format "January 2, 2006" }}</time></a> &middot;
<!-- {{ if lt 1 .WordCount }}{{ .WordCount }} words{{ else }}{{ .WordCount }} word{{ end }} &middot; --> <!-- {{ if lt 1 .WordCount }} words{{ else }}{{ .WordCount }} word{{ end }} &middot; -->
{{ .ReadingTime }} minute read {{ .ReadingTime }} minute read
<div class="tags"> <div class="tags">
{{ with .Params.tags }}{{ if ge (len .) 1 }} {{ with .Params.tags }}{{ if ge (len .) 1 }}
{{ range . }}<span class="tag p-category"><!--<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}">-->{{ . }}<!--</a>--></span> {{ end }} {{ range . }}<span class="tag p-category"><!--<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}">-->{{ . }}<!--</a>--></span>
{{ end }}
{{ end }}{{ end }} {{ end }}{{ end }}
</div> </div>
</div> </div>

View File

@@ -485,7 +485,7 @@ body#home footer div#info a#source {
} }
/* Fancy Waving Hand Emoji (TM) */ /* Fancy Waving Hand Emoji (TM)  https://jarv.is/notes/css-waving-hand-emoji/ */
@keyframes wave { @keyframes wave {
0% { transform: rotate( 0.0deg); } 0% { transform: rotate( 0.0deg); }
@@ -836,11 +836,75 @@ body#notes main#archive section.year div.title {
body#notes main#single article div.meta { body#notes main#single article div.meta {
font-size: 14px; font-size: 14px;
} }
}
body#notes div#content code {
white-space: normal; /* Syntax Highlighting  modified from Monokai Light https://pypi.org/project/pygments-style-monokailight/ */
}
} /* Error */ .highlight .err { color: #960050; }
/* Keyword */ .highlight .k { color: #03748a }
/* KeywordConstant */ .highlight .kc { color: #03748a }
/* KeywordDeclaration */ .highlight .kd { color: #03748a }
/* KeywordNamespace */ .highlight .kn { color: #e8003d }
/* KeywordPseudo */ .highlight .kp { color: #03748a }
/* KeywordReserved */ .highlight .kr { color: #03748a }
/* KeywordType */ .highlight .kt { color: #03748a }
/* Name */ .highlight .n { color: #111111 }
/* NameAttribute */ .highlight .na { color: #489c44 }
/* NameBuiltin */ .highlight .nb { color: #111111 }
/* NameBuiltinPseudo */ .highlight .bp { color: #111111 }
/* NameClass */ .highlight .nc { color: #489c44 }
/* NameConstant */ .highlight .no { color: #03748a }
/* NameDecorator */ .highlight .nd { color: #489c44 }
/* NameEntity */ .highlight .ni { color: #111111 }
/* NameException */ .highlight .ne { color: #489c44 }
/* NameFunction */ .highlight .nf { color: #489c44 }
/* NameFunctionMagic */ .highlight .fm { color: #111111 }
/* NameLabel */ .highlight .nl { color: #111111 }
/* NameNamespace */ .highlight .nn { color: #111111 }
/* NameOther */ .highlight .nx { color: #489c44 }
/* NameProperty */ .highlight .py { color: #111111 }
/* NameTag */ .highlight .nt { color: #e8003d }
/* NameVariable */ .highlight .nv { color: #111111 }
/* NameVariableClass */ .highlight .vc { color: #111111 }
/* NameVariableGlobal */ .highlight .vg { color: #111111 }
/* NameVariableInstance */ .highlight .vi { color: #111111 }
/* NameVariableMagic */ .highlight .vm { color: #111111 }
/* Literal */ .highlight .l { color: #8145ec }
/* LiteralDate */ .highlight .ld { color: #c17005 }
/* LiteralString */ .highlight .s { color: #c17005 }
/* LiteralStringAffix */ .highlight .sa { color: #c17005 }
/* LiteralStringBacktick */ .highlight .sb { color: #c17005 }
/* LiteralStringChar */ .highlight .sc { color: #c17005 }
/* LiteralStringDelimiter */ .highlight .dl { color: #c17005 }
/* LiteralStringDoc */ .highlight .sd { color: #c17005 }
/* LiteralStringDouble */ .highlight .s2 { color: #c17005 }
/* LiteralStringEscape */ .highlight .se { color: #8045ff }
/* LiteralStringHeredoc */ .highlight .sh { color: #c17005 }
/* LiteralStringInterpol */ .highlight .si { color: #c17005 }
/* LiteralStringOther */ .highlight .sx { color: #c17005 }
/* LiteralStringRegex */ .highlight .sr { color: #c17005 }
/* LiteralStringSingle */ .highlight .s1 { color: #c17005 }
/* LiteralStringSymbol */ .highlight .ss { color: #c17005 }
/* LiteralNumber */ .highlight .m { color: #8145ec }
/* LiteralNumberBin */ .highlight .mb { color: #8145ec }
/* LiteralNumberFloat */ .highlight .mf { color: #8145ec }
/* LiteralNumberHex */ .highlight .mh { color: #8145ec }
/* LiteralNumberInteger */ .highlight .mi { color: #8145ec }
/* LiteralNumberIntegerLong */ .highlight .il { color: #8145ec }
/* LiteralNumberOct */ .highlight .mo { color: #8145ec }
/* Operator */ .highlight .o { color: #e8003d }
/* OperatorWord */ .highlight .ow { color: #e8003d }
/* Punctuation */ .highlight .p { color: #111111 }
/* Comment */ .highlight .c { color: #6b6859 }
/* CommentHashbang */ .highlight .ch { color: #6b6859 }
/* CommentMultiline */ .highlight .cm { color: #6b6859 }
/* CommentSingle */ .highlight .c1 { color: #6b6859 }
/* CommentSpecial */ .highlight .cs { color: #6b6859 }
/* CommentPreproc */ .highlight .cp { color: #6b6859 }
/* CommentPreprocFile */ .highlight .cpf { color: #6b6859 }
/* GenericEmph */ .highlight .ge { font-style: italic }
/* GenericStrong */ .highlight .gs { font-weight: bold }
@@ -862,16 +926,19 @@ body#error div#message {
border-radius: 4px; border-radius: 4px;
box-shadow: 0 1px 3px #e0e0e0, 0 1px 2px #888; box-shadow: 0 1px 3px #e0e0e0, 0 1px 2px #888;
} }
body#error div#message h1 { body#error div#message h1 {
margin: 16px 0; margin: 16px 0;
font-size: 22px; font-size: 22px;
font-weight: 300; font-weight: 300;
} }
body#error div#message p { body#error div#message p {
margin: 16px 0; margin: 16px 0;
font-size: 14px; font-size: 14px;
line-height: 140%; line-height: 140%;
} }
body#error div#message a { body#error div#message a {
color: #039be5; color: #039be5;
} }