You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@kafka.apache.org by gu...@apache.org on 2017/06/01 23:24:26 UTC
[3/3] kafka-site git commit: Add auto syntax highlighter
Add auto syntax highlighter
Added plugin to do auto syntax highlighting for code snippets in our docs. (https://github.com/syntaxhighlighter/syntaxhighlighter/wiki)
Here's an example of how to syntax highlight some java code:
`<pre class="brush: java;">your code goes here</pre>`
Here's what this would look like:
Author: Derrick Or <de...@gmail.com>
Reviewers: Guozhang Wang <wa...@gmail.com>
Closes #59 from derrickdoo/syntax-highlighting
Project: http://git-wip-us.apache.org/repos/asf/kafka-site/repo
Commit: http://git-wip-us.apache.org/repos/asf/kafka-site/commit/c48d9d36
Tree: http://git-wip-us.apache.org/repos/asf/kafka-site/tree/c48d9d36
Diff: http://git-wip-us.apache.org/repos/asf/kafka-site/diff/c48d9d36
Branch: refs/heads/asf-site
Commit: c48d9d36ae8bfdbe84197e04770cb143c8830987
Parents: 13d4582
Author: Derrick Or <de...@gmail.com>
Authored: Thu Jun 1 16:24:20 2017 -0700
Committer: Guozhang Wang <wa...@gmail.com>
Committed: Thu Jun 1 16:24:20 2017 -0700
----------------------------------------------------------------------
css/styles.css | 694 +++++
css/syntax-highlighting.css | 270 ++
includes/_footer.htm | 1 +
includes/_header.htm | 3 +-
js/syntaxhighlighter.js | 5394 ++++++++++++++++++++++++++++++++++++++
styles.css | 693 -----
6 files changed, 6361 insertions(+), 694 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/kafka-site/blob/c48d9d36/css/styles.css
----------------------------------------------------------------------
diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..2a78465
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,694 @@
+/* globals */
+html, body {
+ height: 100%;
+}
+html {
+ font-size: 62.5%;
+}
+body {
+ display:flex;
+ flex-direction: column;
+ min-width: 32rem;
+ font-size: 1.4rem;
+ line-height: 1.8;
+ font-family: 'Roboto', sans-serif;
+ margin: 0;
+}
+code, pre {
+ font-family: Menlo, Consolas, monospace;
+}
+pre {
+ border-style: solid;
+ border-color: #E5E5E5;
+ border-width: .1rem .5rem;
+ overflow-x: scroll;
+ padding: 1rem 2rem 1.5rem;
+ color: #444444;
+ margin: 2rem 0;
+}
+code {
+ border: .1rem solid #E5E5E5;
+ margin: 0 .3rem;
+ padding: .2rem .4rem;
+ background-color: #F4F9F9;
+}
+code b, pre b,
+h1, h2, h3, h4 {
+ line-height: 1.2;
+}
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+ color: #000000;
+}
+h1 {
+ font-size: 5.6rem;
+ font-weight: 900;
+ margin: 0;
+}
+h2 {
+ text-transform: uppercase;
+ font-size: 2rem;
+ font-weight: 700;
+ margin: 0;
+}
+h3, h4 {
+ font-size: 2rem;
+ font-weight: 700;
+}
+h5 {
+ font-size: 1.6rem;
+}
+h3.bullet {
+ margin-bottom: 1rem;
+}
+h3.bullet::after {
+ content: "";
+ display: block;
+ background-color: #000000;
+ height: .2rem;
+ width: 5rem;
+}
+a {
+ color: #0B6D88;
+ text-decoration: none;
+}
+a:hover {
+ color: #0C637B;
+}
+img {
+ max-width: 100%;
+}
+.btn {
+ background-color: #0B6D88;
+ color: #FFFFFF;
+ border-radius: .2rem;
+ -moz-border-radius: .2rem;
+ -webkit-border-radius: .2rem;
+ text-align: center;
+ text-transform: capitalize;
+ padding: .9rem 2rem;
+}
+.btn--secondary {
+ color: #0B6D88;
+ border: .2rem solid #0B6D88;
+ background-color: transparent;
+}
+.btn--sm {
+ padding: .5rem 1rem;
+}
+.btn:hover {
+ background-color: #0C637B;
+ color: #FFFFFF;
+}
+ul {
+ padding-left: 2rem;
+ margin:1rem 0 1rem 0;
+}
+.toc {
+ padding: 0;
+ list-style: none;
+ text-transform: uppercase;
+ margin-bottom: 5rem;
+}
+.toc li {
+ margin-bottom: .5rem;
+}
+.toc > li {
+ margin-bottom: .6rem;
+}
+.toc a {
+ color: #000000;
+}
+.toc ul {
+ padding: .5rem 1.7rem 0;
+ text-transform: none;
+ font-weight: 400;
+ margin: 0 0 2rem;
+}
+.toc a:hover,
+.toc ul a {
+ color: #0B6D88;
+}
+.toc ul ul {
+ padding: 0 1.8rem;
+ margin-bottom: 0;
+}
+ol.toc {
+ list-style: decimal;
+ padding: 0 0 0 2rem;
+}
+ol.toc > li {
+ padding-left: .2rem;
+}
+.data-table {
+ display: block;
+ border: none;
+ border-collapse: collapse;
+ width: 100%;
+ overflow-x: scroll;
+ margin: 2rem 0;
+}
+.data-table tbody {
+ border-style: solid;
+ border-color: #E5E5E5;
+ border-width: 0 .5rem;
+}
+.data-table td, .data-table th {
+ border: .1rem solid #cccccc;
+ padding: .5rem 1rem;
+ min-width: 10rem;
+}
+.data-table th {
+ text-align: left;
+ background-color: #000000;
+ border: .1rem solid #222222;
+ color: #ffffff;
+ font-weight: 400;
+ padding: 1rem;
+ text-transform: uppercase;
+ overflow: hidden;
+}
+.data-table td {
+ /* These are technically the same, but use both */
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+
+ -ms-word-break: break-all;
+ /* This is the dangerous one in WebKit, as it breaks things wherever */
+ word-break: break-all;
+ /* Instead use this non-standard one: */
+ word-break: break-word;
+
+ /* Adds a hyphen where the word breaks, if supported (No Blink) */
+ -ms-hyphens: auto;
+ -moz-hyphens: auto;
+ -webkit-hyphens: auto;
+ hyphens: auto;
+}
+
+/* helper classes */
+.centered {
+ display: block;
+ margin: auto;
+}
+.pb-10 {
+ display: inline-block;
+ padding-bottom: 1rem;
+}
+
+/* components */
+.main {
+ margin: 0 auto;
+ width: 120rem;
+ padding: 0 2rem 8rem 2rem;
+}
+.header {
+ padding: 2rem 0 1rem;
+ background-color: #FFFFFF;
+}
+.footer {
+ flex: 1;
+ position: relative;
+}
+.footer__inner {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ border-top: .1rem solid #dedede;
+ font-size: .9rem;
+ line-height: 1.2rem;
+ color: #888888;
+ padding: 2rem 0;
+}
+.footer__legal {
+ margin: 0 2rem;
+}
+.footer__legal a {
+ color: #666666;
+}
+.sub-header {
+ overflow: hidden;
+ margin: 3rem 0 1rem;
+}
+.breadcrumbs {
+ list-style: none;
+ padding: 0;
+ text-transform: uppercase;
+ overflow: hidden;
+ margin-bottom: 0;
+}
+.breadcrumbs li {
+ display: flex;
+ align-items: center;
+}
+.breadcrumbs li::after {
+ content: '\00BB';
+ margin-left: .5rem;
+ height: 1rem;
+ line-height: .9rem;
+}
+.breadcrumbs a {
+ color: #000000;
+}
+.breadcrumbs a:hover {
+ color: #0B6D88;
+}
+.content {
+ margin-top: 3rem;
+}
+nav {
+ float: left;
+ text-transform: uppercase;
+ width: 16rem;
+}
+.nav__item,
+.nav__item__with__subs {
+ color: #000000;
+ border-right: 2px solid #000000;
+ display: block;
+ padding-top: 1.5rem;
+ position: relative;
+}
+.nav__item__with__subs {
+ padding-top: 0;
+}
+.nav__sub__anchor,
+.nav__sub__item {
+ border-right: none;
+}
+.nav__sub__item {
+ display: none;
+ color: #888888;
+ font-size: 1.2rem;
+ text-transform: capitalize;
+}
+.nav__item__with__subs--expanded .nav__sub__item {
+ display: block;
+}
+.nav__item:first-of-type {
+ padding-top: 0;
+}
+.nav__item__with__subs .nav__item:first-of-type {
+ padding-top: 1.5rem;
+}
+.nav__item::after {
+ content: "";
+ display: block;
+ height: 1.1rem;
+ width: 1.1rem;
+ border-radius: 1rem;
+ -moz-border-radius: 1rem;
+ -webkit-border-radius: 1rem;
+ border: 2px solid #000000;
+ background: #FFFFFF;
+ position: absolute;
+ right: -.9rem;
+ top: 1.7rem;
+ opacity: 0;
+ transition: opacity .2s ease-out;
+}
+.nav__item.selected::after {
+ opacity: 1;
+}
+.nav__item.selected:first-of-type::after {
+ top: .2rem;
+}
+.nav__item__with__subs .nav__item:first-of-type::after {
+ top: 1.7rem;
+}
+nav .btn {
+ display: block;
+ margin-top: 4rem;
+}
+.social-links {
+ margin: 2rem 0 3rem;
+ font-size: 1.2rem;
+}
+.twitter {
+ color: #888888;
+ text-transform: none;
+ background-image: url(/images/twitter_logo.png);
+ background-size: contain;
+ background-repeat: no-repeat;
+ padding-left: 1.9rem;
+}
+.twitter:hover {
+ color: #888888;
+ opacity: 0.8;
+}
+.right {
+ margin-left: 22rem;
+ min-height: 60rem;
+ overflow: hidden;
+}
+.apache-feather {
+ position: absolute;
+ bottom: 2rem;
+ right: 2rem;
+
+}
+.apache-feather:hover {
+ -webkit-animation-name: spin;
+ -webkit-animation-duration: 200ms;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-timing-function: linear;
+ -moz-animation-name: spin;
+ -moz-animation-duration: 200ms;
+ -moz-animation-iteration-count: infinite;
+ -moz-animation-timing-function: linear;
+ -ms-animation-name: spin;
+ -ms-animation-duration: 200ms;
+ -ms-animation-iteration-count: infinite;
+ -ms-animation-timing-function: linear;
+
+ animation-name: spin;
+ animation-duration: 200ms;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
+}
+
+
+@-ms-keyframes spin {
+ from { -ms-transform: rotate(0deg); }
+ to { -ms-transform: rotate(360deg); }
+}
+@-moz-keyframes spin {
+ from { -moz-transform: rotate(0deg); }
+ to { -moz-transform: rotate(360deg); }
+}
+@-webkit-keyframes spin {
+ from { -webkit-transform: rotate(0deg); }
+ to { -webkit-transform: rotate(360deg); }
+}
+@keyframes spin {
+ from {
+ transform:rotate(0deg);
+ }
+ to {
+ transform:rotate(360deg);
+ }
+}
+
+/* pages */
+.index {
+ text-align: center;
+ padding-right: 25%;
+}
+.desc {
+ margin-left: 3rem;
+ margin-bottom: 6rem;
+ overflow: hidden;
+}
+.desc-item {
+ float: left;
+ width: 18rem;
+ margin-left: 4.2rem;
+}
+.desc-item:first-of-type {
+ width: 25rem;
+ margin-right: 1rem;
+ margin-left: 0;
+}
+.desc-item p {
+ margin: 0;
+ width: 18rem;
+}
+.desc-item p:before {
+ content: "";
+ border-top: 2px solid #000000;
+ display: block;
+ width: 5rem;
+ margin: .2rem 0 1rem;
+}
+.callout {
+ background-color: #F0F0F0;
+ padding: 1.5rem 2rem 3rem;
+ width: 33rem;
+ margin: 2rem auto 0;
+ position: relative;
+ text-align: center;
+}
+.callout--basic {
+ width: auto;
+}
+.callout::before {
+ content: "";
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 8rem 0 0 5rem;
+ border-color: transparent transparent transparent #F0F0F0;
+ top: -6rem;
+ right: 10rem;
+ position: absolute;
+ -ms-transform: rotate(-10deg);
+ -webkit-transform: rotate(-10deg);
+ transform: rotate(-10deg);
+}
+.callout--basic::before {
+ display: none;
+}
+.callout__action {
+ display: inline-block;
+ width: 10rem;
+}
+
+.documentation__banner {
+ background-color: rgba(0,0,0,0.8);
+ color: #ffffff;
+ display: block;
+ padding: 1.5rem 2rem;
+ margin-bottom: 3rem
+}
+
+.documentation__banner:hover {
+ background-color: #888888;
+ color: #ffffff;
+ cursor: pointer;
+}
+
+.documentation--current .documentation__banner {
+ display: none;
+}
+
+.grid {
+ margin-top: 2rem;
+}
+
+.grid__item {
+ width: 20rem;
+ margin: .5rem;
+ border-radius: .4rem;
+ overflow: hidden;
+ border: 1px solid #888888;
+}
+
+.grid__item__link {
+ display: block;
+ height: 8rem;
+ margin-bottom: -.1rem;
+ text-align: center;
+ padding-top: 2rem;
+}
+
+.grid__item__link:hover {
+ opacity: .8;
+}
+
+.grid__item__logo {
+ margin: auto;
+ width: 16rem;
+ height: 6rem;
+ display: block;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center center;
+}
+
+.grid__item__description {
+ margin: 0 2rem 2rem;
+ padding-top: 2rem;
+ border-top: 1px solid #888888;
+}
+
+
+
+/* Responsive styles */
+@media only screen and (max-width: 1240px) {
+ .main {
+ width: auto;
+ max-width: 100%;
+ margin: 0 2rem;
+ }
+ .footer__legal__one {
+ display:block;
+ }
+}
+
+@media only screen and (max-width: 1035px) {
+ .desc {
+ margin-left: 0;
+ margin-bottom: 2rem;
+ }
+ .desc-item,
+ .desc-item:first-of-type {
+ float: none;
+ width: auto;
+ margin-left: 0;
+ margin-bottom: 4rem;
+ }
+ .desc-item p {
+ width: auto;
+ }
+ .index {
+ padding-right: 0;
+ text-align: left;
+ }
+ .callout {
+ margin: 2rem 1.5rem;
+ }
+ .apache-feather {
+ bottom: 2.8rem;
+ }
+}
+
+@media only screen and (max-width: 800px) {
+ .desc-item,
+ .desc-item:first-of-type {
+ margin-bottom: 3rem;
+ }
+ .kafka-diagram {
+ width: 80%;
+ min-width: 28rem;
+ height: auto;
+ }
+ .callout {
+ width: 60%;
+ min-width: 21rem;
+ }
+ .callout::before {
+ right: 25%;
+ }
+ .footer__legal__two {
+ display:block;
+ }
+}
+
+@media only screen and (max-width: 650px) {
+ html, body {
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ }
+ .main {
+ padding: 0 1rem;
+ margin: 0;
+ }
+ .kafka-diagram {
+ display: block;
+ margin: 0 auto;
+ }
+ .callout {
+ margin: 2rem auto;
+ }
+ .right {
+ padding-bottom: 10rem;
+ }
+ .navindicator {
+ min-width: 32rem;
+ position: absolute;
+ top: -0.8rem;
+ left: 0;
+ width: 100%;
+ text-align: center;
+ z-index: 2;
+ }
+ .navindicator__item {
+ height: .2rem;
+ width: calc(79% / 12); /* Note: width of mobile nav indicator should be divided by number of top level pages */
+ background-color: #888888;
+ display: inline-block;
+ margin: 0 .5%;
+ }
+ .navindicator__item.selected {
+ background-color: #FFFFFF;
+ }
+ nav {
+ display: block;
+ position: fixed;
+ background-color: #000000;
+ bottom: 0;
+ left: 0;
+ z-index: 1;
+ width: 100%;
+ }
+ .nav-scroller {
+ white-space: nowrap;
+ overflow-y: hidden;
+ overflow-x: scroll;
+ -webkit-overflow-scrolling: touch;
+ box-shadow: 0 0 1rem rgba(0,0,0,0.3);
+ }
+ .nav__inner {
+ width: 2000px;
+ }
+ .nav__item,
+ .nav__item:first-of-type {
+ color: #888888;
+ float: left;
+ padding: 2.6rem 1.1rem 1.8rem;
+ border: none;
+ }
+ .nav__item.selected,
+ .nav__item:hover {
+ color: #FFFFFF;
+ }
+ .nav__item::after,
+ .nav__item.selected::after,
+ nav.hovering .nav__item:hover::after,
+ nav .btn,
+ .social-links,
+ .footer {
+ display: none;
+ }
+ .nav__item__with__subs .nav__item:first-of-type,
+ .nav__item .nav__item {
+ padding: 0;
+ }
+ .nav__sub__item {
+ margin-left: 2rem;
+ line-height: 2.2rem;
+ }
+ .right {
+ margin: 0;
+ min-height: auto;
+ }
+}
+
+@media only screen and (max-width: 460px) {
+ body {
+ font-size: 1.2rem;
+ }
+ h1 {
+ font-size: 3.6rem;
+ }
+ h2, h3, h4 {
+ font-size: 1.6rem;
+ }
+ .logo {
+ width: 21.667rem;
+ height: auto;
+ }
+ .desc-item,
+ .desc-item:first-of-type {
+ margin-bottom: 2rem;
+ }
+
+ .grid__item {
+ width: 96% !important;
+ position: relative !important;
+ float: left !important;
+ top: auto !important;
+ left: auto !important;
+ margin-bottom: 2rem;
+ }
+}
http://git-wip-us.apache.org/repos/asf/kafka-site/blob/c48d9d36/css/syntax-highlighting.css
----------------------------------------------------------------------
diff --git a/css/syntax-highlighting.css b/css/syntax-highlighting.css
new file mode 100644
index 0000000..d608c48
--- /dev/null
+++ b/css/syntax-highlighting.css
@@ -0,0 +1,270 @@
+/**
+ * Emulates Apple Swift documentation syntax highlighting
+ * Contributed by Nate Cook
+ * http://natecook.com
+ */
+.syntaxhighlighter a,
+.syntaxhighlighter div,
+.syntaxhighlighter code,
+.syntaxhighlighter table,
+.syntaxhighlighter table td,
+.syntaxhighlighter table tr,
+.syntaxhighlighter table tbody,
+.syntaxhighlighter table thead,
+.syntaxhighlighter table caption,
+.syntaxhighlighter textarea {
+ -moz-border-radius: 0 0 0 0 !important;
+ -webkit-border-radius: 0 0 0 0 !important;
+ background: none !important;
+ border: 0 !important;
+ bottom: auto !important;
+ float: none !important;
+ height: auto !important;
+ left: auto !important;
+ line-height: 1.1em !important;
+ margin: 0 !important;
+ outline: 0 !important;
+ overflow: visible !important;
+ padding: 0 !important;
+ position: static !important;
+ right: auto !important;
+ text-align: left !important;
+ top: auto !important;
+ vertical-align: baseline !important;
+ width: auto !important;
+ box-sizing: content-box !important;
+ font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
+ font-weight: normal !important;
+ font-style: normal !important;
+ font-size: 1.4rem !important;
+ min-height: inherit !important;
+ min-height: auto !important; }
+
+.syntaxhighlighter {
+ width: 100% !important;
+ margin: 1em 0 1em 0 !important;
+ position: relative !important;
+ overflow: auto !important;
+ font-size: 1em !important; }
+ .syntaxhighlighter .container:before, .syntaxhighlighter .container:after {
+ content: none !important; }
+ .syntaxhighlighter.source {
+ overflow: hidden !important; }
+ .syntaxhighlighter .bold {
+ font-weight: bold !important; }
+ .syntaxhighlighter .italic {
+ font-style: italic !important; }
+ .syntaxhighlighter .line {
+ white-space: pre !important; }
+ .syntaxhighlighter table {
+ width: 100% !important; }
+ .syntaxhighlighter table caption {
+ text-align: left !important;
+ padding: .5em 0 0.5em 1em !important; }
+ .syntaxhighlighter table td.code {
+ width: 100% !important; }
+ .syntaxhighlighter table td.code .container {
+ position: relative !important; }
+ .syntaxhighlighter table td.code .container textarea {
+ box-sizing: border-box !important;
+ position: absolute !important;
+ left: 0 !important;
+ top: 0 !important;
+ width: 100% !important;
+ height: 100% !important;
+ border: none !important;
+ background: white !important;
+ padding-left: 1em !important;
+ overflow: hidden !important;
+ white-space: pre !important; }
+ .syntaxhighlighter table td.gutter .line {
+ text-align: right !important;
+ padding: 0 0.5em 0 1em !important; }
+ .syntaxhighlighter table td.code .line {
+ padding: 0 1em !important; }
+ .syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
+ padding-left: 0em !important; }
+ .syntaxhighlighter.show {
+ display: block !important; }
+ .syntaxhighlighter.collapsed table {
+ display: none !important; }
+ .syntaxhighlighter.collapsed .toolbar {
+ padding: 0.1em 0.8em 0em 0.8em !important;
+ font-size: 1em !important;
+ position: static !important;
+ width: auto !important;
+ height: auto !important; }
+ .syntaxhighlighter.collapsed .toolbar span {
+ display: inline !important;
+ margin-right: 1em !important; }
+ .syntaxhighlighter.collapsed .toolbar span a {
+ padding: 0 !important;
+ display: none !important; }
+ .syntaxhighlighter.collapsed .toolbar span a.expandSource {
+ display: inline !important; }
+ .syntaxhighlighter .toolbar {
+ position: absolute !important;
+ right: 1px !important;
+ top: 1px !important;
+ width: 11px !important;
+ height: 11px !important;
+ font-size: 10px !important;
+ z-index: 10 !important; }
+ .syntaxhighlighter .toolbar span.title {
+ display: inline !important; }
+ .syntaxhighlighter .toolbar a {
+ display: block !important;
+ text-align: center !important;
+ text-decoration: none !important;
+ padding-top: 1px !important; }
+ .syntaxhighlighter .toolbar a.expandSource {
+ display: none !important; }
+ .syntaxhighlighter.ie {
+ font-size: .9em !important;
+ padding: 1px 0 1px 0 !important; }
+ .syntaxhighlighter.ie .toolbar {
+ line-height: 8px !important; }
+ .syntaxhighlighter.ie .toolbar a {
+ padding-top: 0px !important; }
+ .syntaxhighlighter.printing .line.alt1 .content,
+ .syntaxhighlighter.printing .line.alt2 .content,
+ .syntaxhighlighter.printing .line.highlighted .number,
+ .syntaxhighlighter.printing .line.highlighted.alt1 .content,
+ .syntaxhighlighter.printing .line.highlighted.alt2 .content {
+ background: none !important; }
+ .syntaxhighlighter.printing .line .number {
+ color: #bbbbbb !important; }
+ .syntaxhighlighter.printing .line .content {
+ color: black !important; }
+ .syntaxhighlighter.printing .toolbar {
+ display: none !important; }
+ .syntaxhighlighter.printing a {
+ text-decoration: none !important; }
+ .syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a {
+ color: black !important; }
+ .syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a {
+ color: #008200 !important; }
+ .syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a {
+ color: blue !important; }
+ .syntaxhighlighter.printing .keyword {
+ color: #006699 !important;
+ font-weight: bold !important; }
+ .syntaxhighlighter.printing .preprocessor {
+ color: gray !important; }
+ .syntaxhighlighter.printing .variable {
+ color: #aa7700 !important; }
+ .syntaxhighlighter.printing .value {
+ color: #009900 !important; }
+ .syntaxhighlighter.printing .functions {
+ color: #ff1493 !important; }
+ .syntaxhighlighter.printing .constants {
+ color: #0066cc !important; }
+ .syntaxhighlighter.printing .script {
+ font-weight: bold !important; }
+ .syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {
+ color: gray !important; }
+ .syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a {
+ color: #ff1493 !important; }
+ .syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a {
+ color: red !important; }
+ .syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a {
+ color: black !important; }
+
+.syntaxhighlighter {
+ background-color: white !important; }
+ .syntaxhighlighter .line.alt1 {
+ background-color: white !important; }
+ .syntaxhighlighter .line.alt2 {
+ background-color: white !important; }
+ .syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
+ background-color: #e9e9e9 !important; }
+ .syntaxhighlighter .line.highlighted.number {
+ color: white !important; }
+ .syntaxhighlighter table caption {
+ color: #353535 !important; }
+ .syntaxhighlighter table td.code .container textarea {
+ background: white;
+ color: black; }
+ .syntaxhighlighter .gutter {
+ color: gray !important; }
+ .syntaxhighlighter .gutter .line {
+ border-right: none !important; }
+ .syntaxhighlighter .gutter .line.highlighted {
+ background-color: #6ce26c !important;
+ color: white !important; }
+ .syntaxhighlighter.printing .line .content {
+ border: none !important; }
+ .syntaxhighlighter.collapsed {
+ overflow: visible !important; }
+ .syntaxhighlighter.collapsed .toolbar {
+ color: #00f !important;
+ background: #fff !important;
+ border: 1px solid #6ce26c !important; }
+ .syntaxhighlighter.collapsed .toolbar a {
+ color: #00f !important; }
+ .syntaxhighlighter.collapsed .toolbar a:hover {
+ color: #f00 !important; }
+ .syntaxhighlighter .toolbar {
+ color: #fff !important;
+ background: #6ce26c !important;
+ border: none !important; }
+ .syntaxhighlighter .toolbar a {
+ color: #fff !important; }
+ .syntaxhighlighter .toolbar a:hover {
+ color: #000 !important; }
+ .syntaxhighlighter .plain, .syntaxhighlighter .plain a {
+ color: black !important; }
+ .syntaxhighlighter .comments, .syntaxhighlighter .comments a {
+ color: #008312 !important; }
+ .syntaxhighlighter .string, .syntaxhighlighter .string a {
+ color: #c41a16 !important; }
+ .syntaxhighlighter .keyword {
+ font-weight: bold !important;
+ color: #b833a1 !important; }
+ .syntaxhighlighter .preprocessor {
+ color: gray !important; }
+ .syntaxhighlighter .variable {
+ color: #508187 !important; }
+ .syntaxhighlighter .value {
+ color: #1c00cf !important; }
+ .syntaxhighlighter .functions {
+ color: #ff1493 !important; }
+ .syntaxhighlighter .constants {
+ color: #0066cc !important; }
+ .syntaxhighlighter .script {
+ font-weight: bold !important;
+ color: #b833a1 !important;
+ background-color: none !important; }
+ .syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
+ color: #b833a1 !important; }
+ .syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
+ color: #6f41a7 !important; }
+ .syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
+ color: red !important; }
+
+.syntaxhighlighter {
+ font-size: 0.75em !important; }
+ .syntaxhighlighter a,
+ .syntaxhighlighter div,
+ .syntaxhighlighter code,
+ .syntaxhighlighter table,
+ .syntaxhighlighter table td,
+ .syntaxhighlighter table tr,
+ .syntaxhighlighter table tbody,
+ .syntaxhighlighter table thead,
+ .syntaxhighlighter table caption,
+ .syntaxhighlighter textarea {
+ font-family: Menlo, Consolas, monospace !important; }
+ .syntaxhighlighter table td.gutter .line {
+ text-align: right !important;
+ padding: 0.2em 0.5em !important; }
+ .syntaxhighlighter table td.code .line {
+ padding: 0.2em 1em !important; }
+ .syntaxhighlighter table td.code .container textarea {
+ padding-top: 0.1em !important;
+ line-height: 1.48em !important; }
+ .syntaxhighlighter .gutter .line {
+ background: #f9f9f9 !important; }
+ .syntaxhighlighter .gutter .line.highlighted {
+ background-color: #898989 !important;
+ color: white !important; }
http://git-wip-us.apache.org/repos/asf/kafka-site/blob/c48d9d36/includes/_footer.htm
----------------------------------------------------------------------
diff --git a/includes/_footer.htm b/includes/_footer.htm
index 356a58a..f303623 100644
--- a/includes/_footer.htm
+++ b/includes/_footer.htm
@@ -15,6 +15,7 @@
</div>
</body>
+ <script type="text/javascript" src="/js/syntaxhighlighter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
<script>
$(function () {
http://git-wip-us.apache.org/repos/asf/kafka-site/blob/c48d9d36/includes/_header.htm
----------------------------------------------------------------------
diff --git a/includes/_header.htm b/includes/_header.htm
index a58bff7..0518356 100644
--- a/includes/_header.htm
+++ b/includes/_header.htm
@@ -2,7 +2,8 @@
<html xmlns:og="http://ogp.me/ns#">
<head>
<title>Apache Kafka</title>
- <link rel='stylesheet' href='/styles.css' type='text/css'>
+ <link rel='stylesheet' href='/css/styles.css' type='text/css'>
+ <link rel='stylesheet' href='/css/syntax-highlighting.css' type='text/css'>
<link rel="icon" type="image/gif" href="/images/apache_feather.gif">
<meta name="robots" content="index,follow" />
<meta name="language" content="en" />