TheCloud/hugoDocs
1
0
Fork 0
mirror of https://github.com/gohugoio/hugoDocs.git synced 2025-12-11 03:53:45 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add styles for different languages in code blocks

Browse Source
This commit is contained in:
Ryan Watters 2017-03-01 03:19:14 -06:00
parent d0c7f01df8
commit b19db039d0
8 changed files with 85 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
content/about-hugo/benefits.md
View File

@ -34,7 +34,7 @@ Not running a website generator on your HTTP server has many benefits. The most
["An Introduction to Static Site Generators", David Walsh]: https://davidwalsh.name/introduction-static-site-generators ["An Introduction to Static Site Generators", David Walsh]: https://davidwalsh.name/introduction-static-site-generators
["Static Site Generators", O-Reilly]: /documents/oreilly-static-site-generators.pdf ["Static Site Generators", O-Reilly]: /documents/oreilly-static-site-generators.pdf
["Top 10 Static Website Generators," Netlify blog]: https://www.netlify.com/blog/2016/05/02/top-ten-static-website-generators/ ["Top 10 Static Website Generators", Netlify blog]: https://www.netlify.com/blog/2016/05/02/top-ten-static-website-generators/
[hugovwordpress]: https://gettingthingstech.com/hugo-vs.-wordpress-page-load-speed-comparison-hugo-leaves-wordpress-in-its-dust/ [hugovwordpress]: https://gettingthingstech.com/hugo-vs.-wordpress-page-load-speed-comparison-hugo-leaves-wordpress-in-its-dust/
[StaticGen: Top Open-Source Static Site Generators (GitHub Stars)]: https://www.staticgen.com/ [StaticGen: Top Open-Source Static Site Generators (GitHub Stars)]: https://www.staticgen.com/
[dotcms]: https://dotcms.com/blog/post/the-resurgence-of-static [dotcms]: https://dotcms.com/blog/post/the-resurgence-of-static

56
content/content-management/cross-references.md
View File

@ -33,8 +33,8 @@ The single parameter to `ref` is a string with a content `documentname` (e.g., `
The `documentname` is the name of a document, including the format extension; this may be just the filename, or the relative path from the `content/` directory. With a document `content/blog/post.md`, either format will produce the same result: The `documentname` is the name of a document, including the format extension; this may be just the filename, or the relative path from the `content/` directory. With a document `content/blog/post.md`, either format will produce the same result:
```golang ```golang
{{</* relref "blog/post.md" */>}} ⇒ `/blog/post/` {{</* relref "blog/post.md" */>}} &rarr; `/blog/post/`
{{</* relref "post.md" */>}} ⇒ `/blog/post/` {{</* relref "post.md" */>}} &rarr; `/blog/post/`
``` ```
If you have the same filename used across multiple sections, you should only use the relative path format; otherwise, the behavior will be `undefined`. This is best illustrated with an example `content` directory: If you have the same filename used across multiple sections, you should only use the relative path format; otherwise, the behavior will be `undefined`. This is best illustrated with an example `content` directory:
@ -56,17 +56,17 @@ The potential for conflicting `documentname` is more likely in larger sites. Usi
{{% code file="content/meta/my-article.md" copy="false" %}} {{% code file="content/meta/my-article.md" copy="false" %}}
```golang ```golang
{{</* relref "my-birthday.md" */>}} ⇒ `/events/my-birthday/` (maybe) {{</* relref "my-birthday.md" */>}} &rarr; `/events/my-birthday/` (maybe)
{{</* relref "my-birthday.md" */>}} ⇒ `/posts/my-birthday/` (maybe) {{</* relref "my-birthday.md" */>}} &rarr; `/posts/my-birthday/` (maybe)
{{</* relref "my-birthday.md" */>}} ⇒ `/galleries/my-birthday/` (maybe) {{</* relref "my-birthday.md" */>}} &rarr; `/galleries/my-birthday/` (maybe)
{{</* relref "events/my-birthday.md" */>}} ⇒ `/events/my-birthday/` {{</* relref "events/my-birthday.md" */>}} &rarr; `/events/my-birthday/`
{{</* relref "galleries/my-birthday.md" */>}} ⇒ `/galleries/my-birthday/` {{</* relref "galleries/my-birthday.md" */>}} &rarr; `/galleries/my-birthday/`
``` ```
{{% /code %}} {{% /code %}}
A relative document name must *not* begin with a slash (`/`). A relative document name must *not* begin with a slash (`/`).
```golang ```golang
{{</* relref "/events/my-birthday.md" */>}} ⇒ `""` {{</* relref "/events/my-birthday.md" */>}} &rarr; `""`
``` ```
### Anchors ### Anchors
@ -74,27 +74,27 @@ A relative document name must *not* begin with a slash (`/`).
When an `anchor` is provided by itself, the current page’s unique identifier will be appended; when an `anchor` is provided appended to `documentname`, the found page's unique identifier will be appended: When an `anchor` is provided by itself, the current page’s unique identifier will be appended; when an `anchor` is provided appended to `documentname`, the found page's unique identifier will be appended:
```golang ```golang
{{</* relref "#anchors" */>}} ⇒ `#anchors:9decaf7` {{</* relref "#anchors" */>}} &rarr; `#anchors:9decaf7`
{{</* relref "about-hugo/hugo-features.md#content" */>}} ⇒ `/blog/post/#who:badcafe` {{</* relref "about-hugo/hugo-features.md#content" */>}} &rarr; `/blog/post/#who:badcafe`
``` ```
The above examples render as follows for this very page as well as a reference to the "Content" heading in the Hugo docs features pageyoursite The above examples render as follows for this very page as well as a reference to the "Content" heading in the Hugo docs features pageyoursite
```golang ```golang
{{</* relref "#who" */>}} ⇒ `#who:9decaf7` {{</* relref "#who" */>}} &rarr; `#who:9decaf7`
{{</* relref "blog/post.md#who" */>}} ⇒ `/blog/post/#who:badcafe` {{</* relref "blog/post.md#who" */>}} &rarr; `/blog/post/#who:badcafe`
``` ```
More information about document unique identifiers and headings can be found [below]({{< ref "#hugo-heading-anchors" >}}). More information about document unique identifiers and headings can be found [below]({{< ref "#hugo-heading-anchors" >}}).
### Examples ### Examples
* `{{</* ref "blog/post.md" */>}}` ⇒ `http://yoursite.com/blog/post/` * `{{</* ref "blog/post.md" */>}}` &rarr; `http://yoursite.com/blog/post/`
* `{{</* ref "post.md#tldr" */>}}` ⇒ `http://yoursite.com/blog/post/#tldr:caffebad` * `{{</* ref "post.md#tldr" */>}}` &rarr; `http://yoursite.com/blog/post/#tldr:caffebad`
* `{{</* relref "post.md" */>}}` ⇒ `/blog/post/` * `{{</* relref "post.md" */>}}` &rarr; `/blog/post/`
* `{{</* relref "blog/post.md#tldr" */>}}` ⇒ `/blog/post/#tldr:caffebad` * `{{</* relref "blog/post.md#tldr" */>}}` &rarr; `/blog/post/#tldr:caffebad`
* `{{</* ref "#tldr" */>}}` ⇒ `#tldr:badcaffe` * `{{</* ref "#tldr" */>}}` &rarr; `#tldr:badcaffe`
* `{{</* relref "#tldr" */>}}` ⇒ `#tldr:badcaffe` * `{{</* relref "#tldr" */>}}` &rarr; `#tldr:badcaffe`
## Hugo Heading Anchors ## Hugo Heading Anchors
@ -148,22 +148,22 @@ The technique outlined above works well enough, but some documents have headings
It’s easy to forget to do that all the time, and Hugo is smart enough to do it for you. It just adds `-x` to the end of each heading it has already seen. It’s easy to forget to do that all the time, and Hugo is smart enough to do it for you. It just adds `-x` to the end of each heading it has already seen.
* `### Example` ⇒ `example` * `### Example` &rarr; `example`
* `### Example` ⇒ `example-1` * `### Example` &rarr; `example-1`
* `### Example` ⇒ `example-2` * `### Example` &rarr; `example-2`
Sometimes it's a little harder, but Hugo can recover from those, too, by adding more suffixes: Sometimes it's a little harder, but Hugo can recover from those, too, by adding more suffixes:
* `# Heading` ⇒ `heading` * `# Heading` &rarr; `heading`
* `# Heading 1` ⇒ `heading-1` * `# Heading 1` &rarr; `heading-1`
* `# Heading` ⇒ `heading-1-1` * `# Heading` &rarr; `heading-1-1`
* `# Heading` ⇒ `heading-1-2` * `# Heading` &rarr; `heading-1-2`
* `# Heading 1` ⇒ `heading-2` * `# Heading 1` &rarr; `heading-2`
This can even affect specified heading anchors that come after a generated heading anchor. This can even affect specified heading anchors that come after a generated heading anchor.
* `# My Heading` ⇒ `my-heading` * `# My Heading` &rarr; `my-heading`
* `# My Heading {#my-heading}` ⇒ `my-heading-1` * `# My Heading {#my-heading}` &rarr; `my-heading-1`
{{% note %}} {{% note %}}
This particular collision and override both unfortunate and unavoidable because Hugo processes each heading for collision detection as it sees it during conversion. This particular collision and override both unfortunate and unavoidable because Hugo processes each heading for collision detection as it sees it during conversion.

3
content/functions/replace.md
View File

@ -19,6 +19,7 @@ aliases: []
`replace` replaces all occurrences of the search string with the replacement string: `replace` replaces all occurrences of the search string with the replacement string:
``` ```
`{{ replace "Batman and Robin" "Robin" "Catwoman" }}` → "Batman and Catwoman" `{{ replace "Batman and Robin" "Robin" "Catwoman" }}`
→ "Batman and Catwoman"
``` ```

4
content/functions/safeHTMLAttr.md
View File

@ -27,6 +27,6 @@ Example: Given a site-wide `config.toml` that contains this menu entry:
url = "irc://irc.freenode.net/#golang" url = "irc://irc.freenode.net/#golang"
``` ```
* `<a href="{{ .URL }}">` ⇒ `<a href="#ZgotmplZ">` (Bad!) * <span class="bad">`<a href="{{ .URL }}">` &rarr; `<a href="#ZgotmplZ">`</span>
* `<a {{ printf "href=%q" .URL | safeHTMLAttr }}>` ⇒ `<a href="irc://irc.freenode.net/#golang">` (Good!) * <span class="good">`<a {{ printf "href=%q" .URL | safeHTMLAttr }}>` &rarr; `<a href="irc://irc.freenode.net/#golang">`</span>

4
content/templates/base.md
View File

@ -91,10 +91,10 @@ When using the `define` keyword, you do *not* need to use Go templates context r
This replaces the contents of our (basically empty) "main" block with something useful for the list template. In this case, we didn't define a `"title"`` block, so the contents from our base template remain unchanged in lists. This replaces the contents of our (basically empty) "main" block with something useful for the list template. In this case, we didn't define a `"title"`` block, so the contents from our base template remain unchanged in lists.
{{% warning %}} {{% warning %}}
Code that you put outside the block definitions *can* break your layout. This even include HTML comments. For example: Code that you put outside the block definitions *can* break your layout. This even includes HTML comments. For example:
```html ```html
<!-- Here is a harmless comment..that will break my layout at build --> <!-- Harmless comment..that will break your layout at build -->
{{ define "main" }} {{ define "main" }}
...your code here ...your code here
{{ end }} {{ end }}

4
layouts/partials/site-footer.html
View File

@ -7,8 +7,8 @@
</div> </div>
<div class="footer-lists"> <div class="footer-lists">
<ul class="footer-list"> <ul class="footer-list">
<li><a href="{{.Site.Params.ghrepo}}" target="_blank"><i class="icon-github"></i> Project Source</a></li> <li><a href="{{.Site.Params.ghrepo}}" target="_blank"><i class="icon-github"></i> Source</a></li>
<li><a href="{{.Site.Params.discuss}}" target="_blank"><i class="icon-forum"></i> Discuss Hugo</a></li> <li><a href="{{.Site.Params.discuss}}" target="_blank"><i class="icon-forum"></i> Discuss</a></li>
<li><a href="{{.Site.Params.gitter}}" target="_blank"><i class="icon-gitter"></i> Gitter (Dev Only)</a></li> <li><a href="{{.Site.Params.gitter}}" target="_blank"><i class="icon-gitter"></i> Gitter (Dev Only)</a></li>
</ul> </ul>
<ul class="footer-list"> <ul class="footer-list">

51
pipeline/scss/components/_new-code.scss
View File

@ -5,6 +5,8 @@
font-size: .9em; font-size: .9em;
weight: inherit; weight: inherit;
font-weight: $code-font-base-weight; font-weight: $code-font-base-weight;
position: relative;
overflow-y: visible;
} }
pre > code, pre > code,
.code { .code {
@ -37,6 +39,44 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
padding: .5em; padding: .5em;
overflow-y: visible;
}
code[class^="language-"] {
&:after {
display: block;
position: absolute;
top: 4px;
right: 4px;
color: lighten($base-font-color, 25%);
font-family:'fontello';
content: '\f121';
}
}
code.language-html:after {
font-family: 'FontAwesome';
content: '\f13b';
}
code.language-js:after {
font-family: 'fontello';
content: '\e802';
font-size: 16px;
top: 2px;
}
code.language-hugo:after,
code.language-go:after,
code.language-golang:after {
font-family: 'fontello';
content: '\e81f';
}
code.language-sass:after,
code.language-scss:after {
font-family: 'fontello';
content: '\e803';
} }
.filename { .filename {
@ -44,9 +84,11 @@
color: lighten($base-font-color, 45%); color: lighten($base-font-color, 45%);
padding-left: 1em; padding-left: 1em;
padding-top: .25em; padding-top: .25em;
font-size: .8em; font-size: .7em;
background-color: $code-block-background-color; background-color: $code-block-background-color;
width: 100%; width: 100%;
font-style: italic;
margin-bottom: 0px;
} }
.code-icon { .code-icon {
@ -57,10 +99,10 @@
.copy-button { .copy-button {
transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out;
opacity: 0; opacity: 1;
position: absolute; position: absolute;
right: 10px; right: 30px;
top: 40px; top: 1px;
background-color: white; background-color: white;
color: $base-font-color; color: $base-font-color;
border-radius: 0px; border-radius: 0px;
@ -69,6 +111,7 @@
width: auto; width: auto;
font-size: 12px; font-size: 12px;
display: block; display: block;
z-index: 999;
&:hover { &:hover {
@include card(3); @include card(3);
} }

2
static/css/style.min.css vendored
View File

File diff suppressed because one or more lines are too long