mirror of https://github.com/istio/istio.io.git
Spruce up our code blocks.
- Use different rendering style for code blocks. - Define a default language so stuff always looks right. - Add a bit more info to the writing-a-topic guide.
This commit is contained in:
Martin Taillefer
parent
c7f4640437
commit
4d7f17a09c
|
|
@ -86,6 +86,7 @@ order: <order>
|
|||
|
||||
layout: docs
|
||||
type: markdown
|
||||
---
|
||||
```
|
||||
|
||||
Copy the above at the start of your new markdown file and update
|
||||
|
|
@ -114,8 +115,7 @@ subdirectory.
|
|||
|
||||
## Adding images to a topic
|
||||
|
||||
Put image files in a `img/NAME` subdirectory of where you put your markdown file, where NAME corresponds to the name of your
|
||||
markdown file. The preferred image format is SVG.
|
||||
Put image files in an `img` subdirectory of where you put your markdown file. The preferred image format is SVG.
|
||||
|
||||
If you must use a PNG or JPEG file instead, and the file
|
||||
was generated from an original SVG file, please include the
|
||||
|
|
@ -123,6 +123,25 @@ SVG file in the repository even if it isn't used in the web
|
|||
site itself. This is so we can update the imagery over time
|
||||
if needed.
|
||||
|
||||
Within markdown, use the `figure` element to add the image:
|
||||
|
||||
```html
|
||||
{% raw %}<figure>
|
||||
<img src="./img/myfile.svg" alt="Some description for accessibility" titla="A title displayed as a tooltip"/>
|
||||
<figcaption>A caption displayed under the image</figcaption>
|
||||
</figure>{% endraw %}
|
||||
```
|
||||
|
||||
This will insert the image centered with a width of 75% and the given caption under it. You can
|
||||
adjust the width using a style element such as:
|
||||
|
||||
```html
|
||||
{% raw %}<figure>
|
||||
<img style="max-width: 32%;" src="./img/myfile.svg" alt="Some description for accessibility" titla="A title displayed as a tooltip"/>
|
||||
<figcaption>A caption displayed under the image</figcaption>
|
||||
</figure>{% endraw %}
|
||||
```
|
||||
|
||||
## Linking to other pages
|
||||
|
||||
There are three types of links that can be included in documentation. Each uses a different
|
||||
|
|
@ -155,6 +174,7 @@ current hierarchy:
|
|||
line of boilerplate right after the block of front matter:
|
||||
|
||||
```markdown
|
||||
...
|
||||
---
|
||||
{% raw %}{% include home.html %}{% endraw %}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ layout: compress
|
|||
<![endif]-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="language-unknown">
|
||||
<script src="{{home}}/js/navtree.js"></script>
|
||||
|
||||
{{ content }}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ code {
|
|||
font-size: $font-size--primary;
|
||||
}
|
||||
|
||||
pre, pre.prettyprint {
|
||||
pre {
|
||||
background-color: $codeBkColor;
|
||||
color: #000000;
|
||||
border: none !important;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,9 @@
|
|||
/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+bash+batch+c+bison+cpp+docker+go+java+json+perl+protobuf+python+yaml&plugins=toolbar+copy-to-clipboard */
|
||||
code[class*="language-"],pre[class*="language-"]{color:#000;background:none;text-shadow:0 1px white;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;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}pre[class*="language-"]::-moz-selection,pre[class*="language-"] ::-moz-selection,code[class*="language-"]::-moz-selection,code[class*="language-"] ::-moz-selection{text-shadow:none;background:#b3d4fc}pre[class*="language-"]::selection,pre[class*="language-"] ::selection,code[class*="language-"]::selection,code[class*="language-"] ::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*="language-"],pre[class*="language-"]{text-shadow:none}}pre[class*="language-"]{padding:1em;margin:.5em 0;overflow:auto}:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {background:#f5f2f0}:not(pre) > code[class*="language-"] {padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:#905}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#690}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#a67f59;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#dd4a68}.token.regex,.token.important,.token.variable{color:#e90}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}
|
||||
/* http://prismjs.com/download.html?themes=prism-coy&languages=markup+css+clike+javascript+bash+batch+c+csharp+cpp+ruby+docker+go+java+json+markdown+objectivec+php+powershell+protobuf+typescript+yaml&plugins=line-highlight+line-numbers+toolbar+copy-to-clipboard */
|
||||
code[class*="language-"],pre[class*="language-"]{color:#000;background:none;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;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}pre[class*="language-"]{position:relative;margin:.5em 0;box-shadow:-1px 0 0 0 #358ccb , 0 0 0 1px #dfdfdf;border-left:10px solid #358ccb;background-color:#fdfdfd;background-image:linear-gradient(transparent 50%,rgba(69,142,209,.04) 50%);background-size:3em 3em;background-origin:content-box;overflow:visible;padding:0}code[class*="language"]{max-height:inherit;height:100%;padding:0 1em;display:block;overflow:auto}:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {background-color:#fdfdfd;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:1em}:not(pre) > code[class*="language-"] {position:relative;padding:.2em;border-radius:.3em;color:#c92c2c;border:1px solid rgba(0,0,0,.1);display:inline;white-space:normal}pre[class*="language-"]:before,pre[class*="language-"]:after{content:'';z-index:-2;display:block;position:absolute;bottom:.75em;left:.18em;width:40%;height:20%;max-height:13em;box-shadow:0 13px 8px #979797;-webkit-transform:rotate(-2deg);-moz-transform:rotate(-2deg);-ms-transform:rotate(-2deg);-o-transform:rotate(-2deg);transform:rotate(-2deg)}:not(pre) > code[class*="language-"]:after,
|
||||
pre[class*="language-"]:after {right:.75em;left:auto;-webkit-transform:rotate(2deg);-moz-transform:rotate(2deg);-ms-transform:rotate(2deg);-o-transform:rotate(2deg);transform:rotate(2deg)}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#7d8b99}.token.punctuation{color:#5f6364}.token.property,.token.tag,.token.boolean,.token.number,.token.function-name,.token.constant,.token.symbol,.token.deleted{color:#c92c2c}.token.selector,.token.attr-name,.token.string,.token.char,.token.function,.token.builtin,.token.inserted{color:#2f9c0a}.token.operator,.token.entity,.token.url,.token.variable{color:#a67f59;background:rgba(255,255,255,.5)}.token.atrule,.token.attr-value,.token.keyword,.token.class-name{color:#1990b8}.token.regex,.token.important{color:#e90}.language-css .token.string,.style .token.string{color:#a67f59;background:rgba(255,255,255,.5)}.token.important{font-weight:normal}.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}.namespace{opacity:.7}@media screen and (max-width:767px){pre[class*="language-"]:before,pre[class*="language-"]:after{bottom:14px;box-shadow:none}}.token.tab:not(:empty):before,
|
||||
.token.cr:before,
|
||||
.token.lf:before {color:#e0d7d1}pre[class*="language-"].line-numbers{padding-left:0}pre[class*="language-"].line-numbers code{padding-left:3.8em}pre[class*="language-"].line-numbers .line-numbers-rows{left:0}pre[class*="language-"][data-line]{padding-top:0;padding-bottom:0;padding-left:0}pre[data-line] code{position:relative;padding-left:4em}pre .line-highlight{margin-top:0}
|
||||
pre[data-line]{position:relative;padding:1em 0 1em 3em}.line-highlight{position:absolute;left:0;right:0;padding:inherit 0;margin-top:1em;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}.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}
|
||||
pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre.line-numbers>code{position:relative}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;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{pointer-events:none;display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}
|
||||
pre.code-toolbar{position:relative}pre.code-toolbar>.toolbar{position:absolute;top:.3em;right:.2em;transition:opacity .3s ease-in-out;opacity:0}pre.code-toolbar:hover>.toolbar{opacity:1}pre.code-toolbar>.toolbar .toolbar-item{display:inline-block}pre.code-toolbar>.toolbar a{cursor:pointer}pre.code-toolbar>.toolbar button{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}pre.code-toolbar>.toolbar a,pre.code-toolbar>.toolbar button,pre.code-toolbar>.toolbar span{color:#bbb;font-size:.8em;padding:0 .5em;background:#f5f2f0;background:rgba(224,224,224,.2);box-shadow:0 2px 0 0 rgba(0,0,0,.2);border-radius:.5em}pre.code-toolbar>.toolbar a:hover,pre.code-toolbar>.toolbar a:focus,pre.code-toolbar>.toolbar button:hover,pre.code-toolbar>.toolbar button:focus,pre.code-toolbar>.toolbar span:hover,pre.code-toolbar>.toolbar span:focus{color:inherit;text-decoration:none}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
---
|
||||
sitemap_exclude: y
|
||||
---
|
||||
|
||||
// Jquery UI for tabbed panes
|
||||
$.getScript("https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js", function(){
|
||||
setupTabs();
|
||||
|
|
@ -14,7 +10,7 @@ function setupTabs(rootElement) {
|
|||
if(tabs.length > 0) {
|
||||
tabs.tabs();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Make the table of contents
|
||||
$(document).ready(function() {
|
||||
|
|
|
|||
|
|
@ -1,36 +0,0 @@
|
|||
(function(){
|
||||
var template = document.getElementById('copy-button');
|
||||
var pre = document.getElementsByClassName('highlight');
|
||||
for (var i = 0; i < pre.length; i++) {
|
||||
pre[i].insertAdjacentHTML('beforebegin', template.innerHTML);
|
||||
};
|
||||
|
||||
var copyCode = new Clipboard('.copy-button', {
|
||||
target: function(trigger) {
|
||||
return trigger.parentElement.nextElementSibling;
|
||||
}
|
||||
});
|
||||
|
||||
// On success:
|
||||
// - Change the "Copy" text to "Copied".
|
||||
// - Swap it to "Copy" in 2s.
|
||||
|
||||
copyCode.on('success', function(event) {
|
||||
event.clearSelection();
|
||||
event.trigger.textContent = 'Copied';
|
||||
window.setTimeout(function() {
|
||||
event.trigger.textContent = 'Copy';
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
// On error (Safari):
|
||||
// - Change to "Unable to copy"
|
||||
// - Swap it to "Copy" in 2s.
|
||||
|
||||
copyCode.on('error', function(event) {
|
||||
event.trigger.textContent = 'Not supported';
|
||||
window.setTimeout(function() {
|
||||
event.trigger.textContent = 'Copy';
|
||||
}, 5000);
|
||||
});
|
||||
})();
|
||||
14
js/prism.js
14
js/prism.js
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue