From 69e97d2fc22d2d7267e465f520a538e6a00e53fe Mon Sep 17 00:00:00 2001 From: Bharat Agarwal Date: Wed, 25 Nov 2020 21:15:17 +0530 Subject: [PATCH 1/8] syntax highlighting capabilities --- src/package-lock.json | 15 ++ src/package.json | 6 +- src/static/css/2019.css | 250 +++++++++++++++++------- src/tools/generate/generate_chapters.js | 32 +++ 4 files changed, 233 insertions(+), 70 deletions(-) diff --git a/src/package-lock.json b/src/package-lock.json index 7d470c6998e..2d7b06c0a20 100644 --- a/src/package-lock.json +++ b/src/package-lock.json @@ -788,6 +788,15 @@ "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==", "dev": true }, + "rainbow-code": { + "version": "2.1.7", + "resolved": "https://registry.npmjs.org/rainbow-code/-/rainbow-code-2.1.7.tgz", + "integrity": "sha512-MuA4/PlfE0uJwxG3/MhylsdnhLDKZcFJfsDrVQX6LrFH2qfaLNB0TdbSupohrPRWgdIS3uBn1gCp05EkRRBtgw==", + "dev": true, + "requires": { + "web-worker": "1.0.0" + } + }, "recursive-readdir": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz", @@ -1094,6 +1103,12 @@ "integrity": "sha512-io/H/D18edTL1D2lcaUTLNLFEVZIPhNd4IdXDB9bEb+uDv2m/6NfyHiXKLFjbmI1ubeYpoQpR1gl9nlcWdI0vA==", "dev": true }, + "web-worker": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.0.0.tgz", + "integrity": "sha512-BzuMqeKVkKKwHV6tJuwePFcxYMxvC97D448mXTgh/CxXAB4sRtoV26gRPN+JDxsXRR7QZyioMV9O6NzQaASf7Q==", + "dev": true + }, "webidl-conversions": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz", diff --git a/src/package.json b/src/package.json index d63099ecebd..6f29aa0e11a 100644 --- a/src/package.json +++ b/src/package.json @@ -43,6 +43,8 @@ "node-fetch": "2.6.1", "xml-js": "1.6.11", "run-script-os": "1.1.3", - "node-watch": "0.7.0" - } + "node-watch": "0.7.0", + "rainbow-code": "^2.1.7" + }, + "dependencies": {} } diff --git a/src/static/css/2019.css b/src/static/css/2019.css index 7bd853d7251..e7622d5a70d 100644 --- a/src/static/css/2019.css +++ b/src/static/css/2019.css @@ -9,10 +9,10 @@ local('Lato Italic'), local('Lato-Italic'), /* url(https://fonts.gstatic.com/s/lato/v16/S6u8w4BMUTPHjxsAUi-qNiXg7eU0.woff2) */ - url('/static/fonts/Lato-Italic-ext.woff2') - format('woff2'); + url('/static/fonts/Lato-Italic-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } + /* latin */ @font-face { font-family: 'Lato'; @@ -23,10 +23,10 @@ local('Lato Italic'), local('Lato-Italic'), /* url(https://fonts.gstatic.com/s/lato/v16/S6u8w4BMUTPHjxsAXC-qNiXg7Q.woff2) */ - url('/static/fonts/Lato-Italic.woff2') - format('woff2'); + url('/static/fonts/Lato-Italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } + /* latin-ext */ @font-face { font-family: 'Lato'; @@ -37,10 +37,10 @@ local('Lato Bold Italic'), local('Lato-BoldItalic'), /* url(https://fonts.gstatic.com/s/lato/v16/S6u_w4BMUTPHjxsI5wq_FQftx9897sxZ.woff2) */ - url('/static/fonts/Lato-BoldItalic-ext.woff2') - format('woff2'); + url('/static/fonts/Lato-BoldItalic-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } + /* latin */ @font-face { font-family: 'Lato'; @@ -51,10 +51,10 @@ local('Lato Bold Italic'), local('Lato-BoldItalic'), /* url(https://fonts.gstatic.com/s/lato/v16/S6u_w4BMUTPHjxsI5wq_Gwftx9897g.woff2) */ - url('/static/fonts/Lato-BoldItalic.woff2') - format('woff2'); + url('/static/fonts/Lato-BoldItalic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } + /* latin-ext */ @font-face { font-family: 'Lato'; @@ -65,10 +65,10 @@ local('Lato Regular'), local('Lato-Regular'), /* url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) */ - url('/static/fonts/Lato-Regular-ext.woff2') - format('woff2'); + url('/static/fonts/Lato-Regular-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } + /* latin */ @font-face { font-family: 'Lato'; @@ -79,10 +79,10 @@ local('Lato Regular'), local('Lato-Regular'), /* url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXiWtFCc.woff2) */ - url('/static/fonts/Lato-Regular.woff2') - format('woff2'); + url('/static/fonts/Lato-Regular.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } + /* latin-ext */ @font-face { font-family: 'Lato'; @@ -93,10 +93,10 @@ local('Lato Bold'), local('Lato-Bold'), /* url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2) */ - url('/static/fonts/Lato-Bold-ext.woff2') - format('woff2'); + url('/static/fonts/Lato-Bold-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } + /* latin */ @font-face { font-family: 'Lato'; @@ -107,10 +107,10 @@ local('Lato Bold'), local('Lato-Bold'), /* url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) */ - url('/static/fonts/Lato-Bold.woff2') - format('woff2'); + url('/static/fonts/Lato-Bold.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } + /* latin-ext */ @font-face { font-family: 'Lato'; @@ -121,10 +121,10 @@ local('Lato Black'), local('Lato-Black'), /* url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh50XSwaPGQ3q5d0N7w.woff2) */ - url('/static/fonts/Lato-Black-ext.woff2') - format('woff2'); + url('/static/fonts/Lato-Black-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } + /* latin */ @font-face { font-family: 'Lato'; @@ -135,10 +135,10 @@ local('Lato Black'), local('Lato-Black'), /* url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh50XSwiPGQ3q5d0.woff2) */ - url('/static/fonts/Lato-Black.woff2') - format('woff2'); + url('/static/fonts/Lato-Black.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } + /* devanagari */ @font-face { font-family: 'Poppins'; @@ -149,10 +149,10 @@ local('Poppins Light'), local('Poppins-Light'), /* url(https://fonts.gstatic.com/s/poppins/v9/pxiByp8kv8JHgFVrLDz8Z11lFd2JQEl8qw.woff2) */ - url('/static/fonts/Poppins-Light-devanagari.woff2') - format('woff2'); + url('/static/fonts/Poppins-Light-devanagari.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } + /* latin-ext */ @font-face { font-family: 'Poppins'; @@ -163,10 +163,10 @@ local('Poppins Light'), local('Poppins-Light'), /* url(https://fonts.gstatic.com/s/poppins/v9/pxiByp8kv8JHgFVrLDz8Z1JlFd2JQEl8qw.woff2) */ - url('/static/fonts/Poppins-Light-ext.woff2') - format('woff2'); + url('/static/fonts/Poppins-Light-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } + /* latin */ @font-face { font-family: 'Poppins'; @@ -177,10 +177,10 @@ local('Poppins Light'), local('Poppins-Light'), /* url(https://fonts.gstatic.com/s/poppins/v9/pxiByp8kv8JHgFVrLDz8Z1xlFd2JQEk.woff2) */ - url('/static/fonts/Poppins-Light.woff2') - format('woff2'); + url('/static/fonts/Poppins-Light.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } + /* devanagari */ @font-face { font-family: 'Poppins'; @@ -191,10 +191,10 @@ local('Poppins Regular'), local('Poppins-Regular'), /* url(https://fonts.gstatic.com/s/poppins/v9/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) */ - url('/static/fonts/Poppins-Regular-devanagari.woff2') - format('woff2'); + url('/static/fonts/Poppins-Regular-devanagari.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } + /* latin-ext */ @font-face { font-family: 'Poppins'; @@ -205,10 +205,10 @@ local('Poppins Regular'), local('Poppins-Regular'), /* url(https://fonts.gstatic.com/s/poppins/v9/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) */ - url('/static/fonts/Poppins-Regular-ext.woff2') - format('woff2'); + url('/static/fonts/Poppins-Regular-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } + /* latin */ @font-face { font-family: 'Poppins'; @@ -219,10 +219,10 @@ local('Poppins Regular'), local('Poppins-Regular'), /* url(https://fonts.gstatic.com/s/poppins/v9/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) */ - url('/static/fonts/Poppins-Regular.woff2') - format('woff2'); + url('/static/fonts/Poppins-Regular.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } + /* devanagari */ @font-face { font-family: 'Poppins'; @@ -233,10 +233,10 @@ local('Poppins Bold'), local('Poppins-Bold'), /* url(https://fonts.gstatic.com/s/poppins/v9/pxiByp8kv8JHgFVrLCz7Z11lFd2JQEl8qw.woff2) */ - url('/static/fonts/Poppins-Bold-devanagari.woff2') - format('woff2'); + url('/static/fonts/Poppins-Bold-devanagari.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } + /* latin-ext */ @font-face { font-family: 'Poppins'; @@ -247,10 +247,10 @@ local('Poppins Bold'), local('Poppins-Bold'), /* url(https://fonts.gstatic.com/s/poppins/v9/pxiByp8kv8JHgFVrLCz7Z1JlFd2JQEl8qw.woff2) */ - url('/static/fonts/Poppins-Bold-ext.woff2') - format('woff2'); + url('/static/fonts/Poppins-Bold-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } + /* latin */ @font-face { font-family: 'Poppins'; @@ -261,10 +261,10 @@ local('Poppins Bold'), local('Poppins-Bold'), /* url(https://fonts.gstatic.com/s/poppins/v9/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff2) */ - url('/static/fonts/Poppins-Bold.woff2') - format('woff2'); + url('/static/fonts/Poppins-Bold.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } + /* devanagari */ @font-face { font-family: 'Poppins'; @@ -275,10 +275,10 @@ local('Poppins Black'), local('Poppins-Black'), /* url(https://fonts.gstatic.com/s/poppins/v9/pxiByp8kv8JHgFVrLBT5Z11lFd2JQEl8qw.woff2) */ - url('/static/fonts/Poppins-Black-devanagari.woff2') - format('woff2'); + url('/static/fonts/Poppins-Black-devanagari.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } + /* latin-ext */ @font-face { font-family: 'Poppins'; @@ -289,10 +289,10 @@ local('Poppins Black'), local('Poppins-Black'), /* url(https://fonts.gstatic.com/s/poppins/v9/pxiByp8kv8JHgFVrLBT5Z1JlFd2JQEl8qw.woff2) */ - url('/static/fonts/Poppins-Black-ext.woff2') - format('woff2'); + url('/static/fonts/Poppins-Black-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } + /* latin */ @font-face { font-family: 'Poppins'; @@ -303,8 +303,7 @@ local('Poppins Black'), local('Poppins-Black'), /* url(https://fonts.gstatic.com/s/poppins/v9/pxiByp8kv8JHgFVrLBT5Z1xlFd2JQEk.woff2) */ - url('/static/fonts/Poppins-Black.woff2') - format('woff2'); + url('/static/fonts/Poppins-Black.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @@ -411,11 +410,11 @@ img { width: 80px; } -.subtitle + .title { +.subtitle+.title { margin-top: 0; } -.subtitle + .title::before { +.subtitle+.title::before { content: normal; } @@ -518,14 +517,16 @@ h2.header { width: 100%; background-color: #f7f779; bottom: calc(0.4em - 1px); - margin-inline-start: 0.5em; /* cover both rtl and ltr scenarios */ + margin-inline-start: 0.5em; + /* cover both rtl and ltr scenarios */ } .navigation-logo .wa { font-weight: 700; letter-spacing: 5px; font-size: 1.3em; - margin-right: -5px; /* fix letter spacing issue for the last letter */ + margin-right: -5px; + /* fix letter spacing issue for the last letter */ font-family: 'Poppins', sans-serif; } @@ -600,11 +601,11 @@ header nav { margin: 0; } -header nav > ul > li > * { +header nav>ul>li>* { margin-right: 2vw; } -header nav > ul > li:last-child > * { +header nav>ul>li:last-child>* { margin-right: 0; } @@ -767,7 +768,7 @@ blockquote { blockquote::before { content: '"'; - content: '"' / ""; + content: '"'/ ""; position: absolute; top: -4rem; left: -7rem; @@ -813,11 +814,11 @@ footer .ha-logo { color: currentColor; } -footer .nav-items > ul > li > * { +footer .nav-items>ul>li>* { margin-right: 2vw; } -footer .nav-items > ul > li:last-child > * { +footer .nav-items>ul>li:last-child>* { margin-right: 0; } @@ -882,6 +883,7 @@ p.copyright a { } @media (max-width: 900px) and (min-width: 601px) { + /* Header */ .top-header, footer { @@ -896,11 +898,11 @@ p.copyright a { display: none; } - header nav > ul > li > * { + header nav>ul>li>* { margin: 0; } - header nav > ul > li > a { + header nav>ul>li>a { margin-bottom: 50px; margin-bottom: 3.125rem; font-size: 16px; @@ -908,7 +910,7 @@ p.copyright a { line-height: 1.4em; } - header nav > ul > li:last-child { + header nav>ul>li:last-child { margin: 0; } @@ -947,7 +949,7 @@ p.copyright a { align-items: center; } - footer .nav-items ul li > * { + footer .nav-items ul li>* { margin: 20px 0; font-size: 16px; font-size: 1rem; @@ -967,9 +969,11 @@ p.copyright a { height: 1px; width: 1px; overflow: hidden; - clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px 1px 1px 1px); + /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); - white-space: nowrap; /* added line */ + white-space: nowrap; + /* added line */ } .hidden { @@ -1010,6 +1014,7 @@ p.copyright a { /* Mobile View */ @media (max-width: 600px) { + body, p, td, @@ -1023,11 +1028,13 @@ p.copyright a { .title-lg { font-size: 40px; font-size: 2.5rem; - font-size: min(2.5rem, 15vw); /* Cap max font size on mobile, if possible. Allows 200% font-size. */ + font-size: min(2.5rem, 15vw); + /* Cap max font size on mobile, if possible. Allows 200% font-size. */ } h2 { - font-size: min(1.5rem, 12vw); /* Cap max font size on mobile, if possible. Allows 200% font-size. */ + font-size: min(1.5rem, 12vw); + /* Cap max font size on mobile, if possible. Allows 200% font-size. */ } /* Header */ @@ -1049,18 +1056,18 @@ p.copyright a { max-width: 75vw; } - header nav > ul > li > * { + header nav>ul>li>* { margin: 0; } - header nav > ul > li > a { + header nav>ul>li>a { margin-bottom: 50px; font-size: 16px; font-size: 1rem; line-height: 1.4em; } - header nav > ul > li:last-child { + header nav>ul>li:last-child { margin: 0; } @@ -1119,7 +1126,7 @@ p.copyright a { align-items: center; } - footer .nav-items ul li > * { + footer .nav-items ul li>* { margin: 20px 0; font-size: 16px; font-size: 1rem; @@ -1161,6 +1168,7 @@ p.copyright a { } @media (max-width: 900px) { + #menu, #mobile-footer-nav-items { display: block; @@ -1171,8 +1179,10 @@ p.copyright a { display: none; flex-direction: column; top: 100%; - left: -20px; /* overcome the parent container's 20px side padding */ - right: -20px; /* overcome the parent container's 20px side padding */ + left: -20px; + /* overcome the parent container's 20px side padding */ + right: -20px; + /* overcome the parent container's 20px side padding */ border-top: 1px solid rgba(242, 242, 242, 0.2); padding: 60px 30px 30px; background-color: #677486; @@ -1204,7 +1214,7 @@ p.copyright a { transition: 0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55); } - .menu-btn__bar + .menu-btn__bar { + .menu-btn__bar+.menu-btn__bar { margin-top: 7px; } @@ -1437,6 +1447,7 @@ p.copyright a { } @media (prefers-reduced-motion: reduce) { + *, ::before, ::after { @@ -1449,3 +1460,106 @@ p.copyright a { transition-delay: 0s !important; } } + + + +/* Syntax Highlighting */ +pre { + border: 1px solid #ccc; + word-wrap: break-word; + padding: 6px 10px; + line-height: 19px; + margin-bottom: 20px +} + +pre code { + border: 0; + padding: 0; + margin: 0; + border-radius: 0 +} + +code { + border: 1px solid #eaeaea; + margin: 0px 2px; + padding: 0px 5px; + font-size: 12px +} + +pre, +code { + font-family: Consolas, 'Liberation Mono', Courier, monospace; + color: #333; + background: #f8f8f8; + border-radius: 3px +} + +pre, +pre code { + font-size: 13px +} + +pre .comment { + color: #998 +} + +pre .support { + color: #0086B3 +} + +pre .tag, +pre .tag-name { + color: navy +} + +pre .keyword, +pre .css-property, +pre .vendor-fix, +pre .sass, +pre .class, +pre .id, +pre .css-value, +pre .entity.function, +pre .storage.function { + font-weight: bold +} + +pre .css-property, +pre .css-value, +pre .vendor-fix, +pre .support.namespace { + color: #333 +} + +pre .constant.numeric, +pre .keyword.unit, +pre .hex-color { + font-weight: normal; + color: #099 +} + +pre .entity.class { + color: #458 +} + +pre .entity.id, +pre .entity.function { + color: #900 +} + +pre .attribute, +pre .variable { + color: teal +} + +pre .string, +pre .support.value { + font-weight: normal; + color: #d14 +} + +pre .regexp { + color: #009926 +} + +/* Syntex Highlighting */ \ No newline at end of file diff --git a/src/tools/generate/generate_chapters.js b/src/tools/generate/generate_chapters.js index 6266ada4209..2a171ed8f57 100644 --- a/src/tools/generate/generate_chapters.js +++ b/src/tools/generate/generate_chapters.js @@ -2,7 +2,10 @@ const fs = require('fs-extra'); const showdown = require('showdown'); const ejs = require('ejs'); const prettier = require('prettier'); +const rainbow = require('rainbow-code'); + +const { JSDOM } = require('jsdom'); const { find_markdown_files, get_yearly_configs, size_of, parse_array } = require('./shared'); const { generate_table_of_contents } = require('./generate_table_of_contents'); const { generate_header_links } = require('./generate_header_links'); @@ -116,10 +119,39 @@ const generate_chapters = async (chapter_match) => { }; +const generate_syntex_snippet = (element, body, type) => { + const snippet_clean = element.innerHTML.replace(/</g, '<').replace(/>/g, '>'); + const snippet_converted = rainbow.colorSync(snippet_clean, type); + body = body.replace(element.innerHTML, snippet_converted); + return body; +}; + const parse_file = async (markdown,chapter) => { const html = converter.makeHtml(markdown); let body = html; + // Syntax Highlighting + const dom = new JSDOM(body); + const html_codes = dom.window.document.querySelectorAll('code.language-html'); + const css_codes = dom.window.document.querySelectorAll('code.language-css'); + const js_codes = dom.window.document.querySelectorAll('code.language-js'); + const sql_codes = dom.window.document.querySelectorAll('code.language-sql'); + + html_codes.forEach(element => { + body = generate_syntex_snippet(element, body, "html"); + }); + css_codes.forEach(element => { + body = generate_syntex_snippet(element, body, "css"); + }); + js_codes.forEach(element => { + body = generate_syntex_snippet(element, body, "javascript"); + }); + sql_codes.forEach(element => { + body = generate_syntex_snippet(element, body, "sql"); + }); + + + const m = converter.getMetadata(); body = generate_header_links(body); body = generate_figure_ids(body); From c57096a0ca92988acbc3119d2919b0f15d46affe Mon Sep 17 00:00:00 2001 From: Bharat Agarwal Date: Fri, 27 Nov 2020 11:15:34 +0530 Subject: [PATCH 2/8] generate syntax highlighting improved and CSS fixed --- src/package.json | 5 +- src/static/css/2019.css | 188 ++++++++---------- src/tools/generate/generate_chapters.js | 38 +--- .../generate/generate_syntax_highlighting.js | 44 ++++ 4 files changed, 137 insertions(+), 138 deletions(-) create mode 100644 src/tools/generate/generate_syntax_highlighting.js diff --git a/src/package.json b/src/package.json index 6f29aa0e11a..88f22d6de38 100644 --- a/src/package.json +++ b/src/package.json @@ -44,7 +44,6 @@ "xml-js": "1.6.11", "run-script-os": "1.1.3", "node-watch": "0.7.0", - "rainbow-code": "^2.1.7" - }, - "dependencies": {} + "rainbow-code": "2.1.7" + } } diff --git a/src/static/css/2019.css b/src/static/css/2019.css index e7622d5a70d..a58e33d76a6 100644 --- a/src/static/css/2019.css +++ b/src/static/css/2019.css @@ -9,10 +9,10 @@ local('Lato Italic'), local('Lato-Italic'), /* url(https://fonts.gstatic.com/s/lato/v16/S6u8w4BMUTPHjxsAUi-qNiXg7eU0.woff2) */ - url('/static/fonts/Lato-Italic-ext.woff2') format('woff2'); + url('/static/fonts/Lato-Italic-ext.woff2') + format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } - /* latin */ @font-face { font-family: 'Lato'; @@ -23,10 +23,10 @@ local('Lato Italic'), local('Lato-Italic'), /* url(https://fonts.gstatic.com/s/lato/v16/S6u8w4BMUTPHjxsAXC-qNiXg7Q.woff2) */ - url('/static/fonts/Lato-Italic.woff2') format('woff2'); + url('/static/fonts/Lato-Italic.woff2') + format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } - /* latin-ext */ @font-face { font-family: 'Lato'; @@ -37,10 +37,10 @@ local('Lato Bold Italic'), local('Lato-BoldItalic'), /* url(https://fonts.gstatic.com/s/lato/v16/S6u_w4BMUTPHjxsI5wq_FQftx9897sxZ.woff2) */ - url('/static/fonts/Lato-BoldItalic-ext.woff2') format('woff2'); + url('/static/fonts/Lato-BoldItalic-ext.woff2') + format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } - /* latin */ @font-face { font-family: 'Lato'; @@ -51,10 +51,10 @@ local('Lato Bold Italic'), local('Lato-BoldItalic'), /* url(https://fonts.gstatic.com/s/lato/v16/S6u_w4BMUTPHjxsI5wq_Gwftx9897g.woff2) */ - url('/static/fonts/Lato-BoldItalic.woff2') format('woff2'); + url('/static/fonts/Lato-BoldItalic.woff2') + format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } - /* latin-ext */ @font-face { font-family: 'Lato'; @@ -65,10 +65,10 @@ local('Lato Regular'), local('Lato-Regular'), /* url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) */ - url('/static/fonts/Lato-Regular-ext.woff2') format('woff2'); + url('/static/fonts/Lato-Regular-ext.woff2') + format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } - /* latin */ @font-face { font-family: 'Lato'; @@ -79,10 +79,10 @@ local('Lato Regular'), local('Lato-Regular'), /* url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXiWtFCc.woff2) */ - url('/static/fonts/Lato-Regular.woff2') format('woff2'); + url('/static/fonts/Lato-Regular.woff2') + format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } - /* latin-ext */ @font-face { font-family: 'Lato'; @@ -93,10 +93,10 @@ local('Lato Bold'), local('Lato-Bold'), /* url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2) */ - url('/static/fonts/Lato-Bold-ext.woff2') format('woff2'); + url('/static/fonts/Lato-Bold-ext.woff2') + format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } - /* latin */ @font-face { font-family: 'Lato'; @@ -107,10 +107,10 @@ local('Lato Bold'), local('Lato-Bold'), /* url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) */ - url('/static/fonts/Lato-Bold.woff2') format('woff2'); + url('/static/fonts/Lato-Bold.woff2') + format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } - /* latin-ext */ @font-face { font-family: 'Lato'; @@ -121,10 +121,10 @@ local('Lato Black'), local('Lato-Black'), /* url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh50XSwaPGQ3q5d0N7w.woff2) */ - url('/static/fonts/Lato-Black-ext.woff2') format('woff2'); + url('/static/fonts/Lato-Black-ext.woff2') + format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } - /* latin */ @font-face { font-family: 'Lato'; @@ -135,10 +135,10 @@ local('Lato Black'), local('Lato-Black'), /* url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh50XSwiPGQ3q5d0.woff2) */ - url('/static/fonts/Lato-Black.woff2') format('woff2'); + url('/static/fonts/Lato-Black.woff2') + format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } - /* devanagari */ @font-face { font-family: 'Poppins'; @@ -149,10 +149,10 @@ local('Poppins Light'), local('Poppins-Light'), /* url(https://fonts.gstatic.com/s/poppins/v9/pxiByp8kv8JHgFVrLDz8Z11lFd2JQEl8qw.woff2) */ - url('/static/fonts/Poppins-Light-devanagari.woff2') format('woff2'); + url('/static/fonts/Poppins-Light-devanagari.woff2') + format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } - /* latin-ext */ @font-face { font-family: 'Poppins'; @@ -163,10 +163,10 @@ local('Poppins Light'), local('Poppins-Light'), /* url(https://fonts.gstatic.com/s/poppins/v9/pxiByp8kv8JHgFVrLDz8Z1JlFd2JQEl8qw.woff2) */ - url('/static/fonts/Poppins-Light-ext.woff2') format('woff2'); + url('/static/fonts/Poppins-Light-ext.woff2') + format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } - /* latin */ @font-face { font-family: 'Poppins'; @@ -177,10 +177,10 @@ local('Poppins Light'), local('Poppins-Light'), /* url(https://fonts.gstatic.com/s/poppins/v9/pxiByp8kv8JHgFVrLDz8Z1xlFd2JQEk.woff2) */ - url('/static/fonts/Poppins-Light.woff2') format('woff2'); + url('/static/fonts/Poppins-Light.woff2') + format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } - /* devanagari */ @font-face { font-family: 'Poppins'; @@ -191,10 +191,10 @@ local('Poppins Regular'), local('Poppins-Regular'), /* url(https://fonts.gstatic.com/s/poppins/v9/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) */ - url('/static/fonts/Poppins-Regular-devanagari.woff2') format('woff2'); + url('/static/fonts/Poppins-Regular-devanagari.woff2') + format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } - /* latin-ext */ @font-face { font-family: 'Poppins'; @@ -205,10 +205,10 @@ local('Poppins Regular'), local('Poppins-Regular'), /* url(https://fonts.gstatic.com/s/poppins/v9/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) */ - url('/static/fonts/Poppins-Regular-ext.woff2') format('woff2'); + url('/static/fonts/Poppins-Regular-ext.woff2') + format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } - /* latin */ @font-face { font-family: 'Poppins'; @@ -219,10 +219,10 @@ local('Poppins Regular'), local('Poppins-Regular'), /* url(https://fonts.gstatic.com/s/poppins/v9/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) */ - url('/static/fonts/Poppins-Regular.woff2') format('woff2'); + url('/static/fonts/Poppins-Regular.woff2') + format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } - /* devanagari */ @font-face { font-family: 'Poppins'; @@ -233,10 +233,10 @@ local('Poppins Bold'), local('Poppins-Bold'), /* url(https://fonts.gstatic.com/s/poppins/v9/pxiByp8kv8JHgFVrLCz7Z11lFd2JQEl8qw.woff2) */ - url('/static/fonts/Poppins-Bold-devanagari.woff2') format('woff2'); + url('/static/fonts/Poppins-Bold-devanagari.woff2') + format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } - /* latin-ext */ @font-face { font-family: 'Poppins'; @@ -247,10 +247,10 @@ local('Poppins Bold'), local('Poppins-Bold'), /* url(https://fonts.gstatic.com/s/poppins/v9/pxiByp8kv8JHgFVrLCz7Z1JlFd2JQEl8qw.woff2) */ - url('/static/fonts/Poppins-Bold-ext.woff2') format('woff2'); + url('/static/fonts/Poppins-Bold-ext.woff2') + format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } - /* latin */ @font-face { font-family: 'Poppins'; @@ -261,10 +261,10 @@ local('Poppins Bold'), local('Poppins-Bold'), /* url(https://fonts.gstatic.com/s/poppins/v9/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff2) */ - url('/static/fonts/Poppins-Bold.woff2') format('woff2'); + url('/static/fonts/Poppins-Bold.woff2') + format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } - /* devanagari */ @font-face { font-family: 'Poppins'; @@ -275,10 +275,10 @@ local('Poppins Black'), local('Poppins-Black'), /* url(https://fonts.gstatic.com/s/poppins/v9/pxiByp8kv8JHgFVrLBT5Z11lFd2JQEl8qw.woff2) */ - url('/static/fonts/Poppins-Black-devanagari.woff2') format('woff2'); + url('/static/fonts/Poppins-Black-devanagari.woff2') + format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } - /* latin-ext */ @font-face { font-family: 'Poppins'; @@ -289,10 +289,10 @@ local('Poppins Black'), local('Poppins-Black'), /* url(https://fonts.gstatic.com/s/poppins/v9/pxiByp8kv8JHgFVrLBT5Z1JlFd2JQEl8qw.woff2) */ - url('/static/fonts/Poppins-Black-ext.woff2') format('woff2'); + url('/static/fonts/Poppins-Black-ext.woff2') + format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } - /* latin */ @font-face { font-family: 'Poppins'; @@ -303,7 +303,8 @@ local('Poppins Black'), local('Poppins-Black'), /* url(https://fonts.gstatic.com/s/poppins/v9/pxiByp8kv8JHgFVrLBT5Z1xlFd2JQEk.woff2) */ - url('/static/fonts/Poppins-Black.woff2') format('woff2'); + url('/static/fonts/Poppins-Black.woff2') + format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @@ -410,11 +411,11 @@ img { width: 80px; } -.subtitle+.title { +.subtitle + .title { margin-top: 0; } -.subtitle+.title::before { +.subtitle + .title::before { content: normal; } @@ -517,16 +518,14 @@ h2.header { width: 100%; background-color: #f7f779; bottom: calc(0.4em - 1px); - margin-inline-start: 0.5em; - /* cover both rtl and ltr scenarios */ + margin-inline-start: 0.5em; /* cover both rtl and ltr scenarios */ } .navigation-logo .wa { font-weight: 700; letter-spacing: 5px; font-size: 1.3em; - margin-right: -5px; - /* fix letter spacing issue for the last letter */ + margin-right: -5px; /* fix letter spacing issue for the last letter */ font-family: 'Poppins', sans-serif; } @@ -601,11 +600,11 @@ header nav { margin: 0; } -header nav>ul>li>* { +header nav > ul > li > * { margin-right: 2vw; } -header nav>ul>li:last-child>* { +header nav > ul > li:last-child > * { margin-right: 0; } @@ -750,10 +749,6 @@ li { line-height: 1.5em; } -pre { - margin: 0; -} - hr { opacity: 0.2; } @@ -768,7 +763,7 @@ blockquote { blockquote::before { content: '"'; - content: '"'/ ""; + content: '"' / ""; position: absolute; top: -4rem; left: -7rem; @@ -814,11 +809,11 @@ footer .ha-logo { color: currentColor; } -footer .nav-items>ul>li>* { +footer .nav-items > ul > li > * { margin-right: 2vw; } -footer .nav-items>ul>li:last-child>* { +footer .nav-items > ul > li:last-child > * { margin-right: 0; } @@ -883,7 +878,6 @@ p.copyright a { } @media (max-width: 900px) and (min-width: 601px) { - /* Header */ .top-header, footer { @@ -898,11 +892,11 @@ p.copyright a { display: none; } - header nav>ul>li>* { + header nav > ul > li > * { margin: 0; } - header nav>ul>li>a { + header nav > ul > li > a { margin-bottom: 50px; margin-bottom: 3.125rem; font-size: 16px; @@ -910,7 +904,7 @@ p.copyright a { line-height: 1.4em; } - header nav>ul>li:last-child { + header nav > ul > li:last-child { margin: 0; } @@ -949,7 +943,7 @@ p.copyright a { align-items: center; } - footer .nav-items ul li>* { + footer .nav-items ul li > * { margin: 20px 0; font-size: 16px; font-size: 1rem; @@ -969,11 +963,9 @@ p.copyright a { height: 1px; width: 1px; overflow: hidden; - clip: rect(1px 1px 1px 1px); - /* IE6, IE7 */ + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); - white-space: nowrap; - /* added line */ + white-space: nowrap; /* added line */ } .hidden { @@ -1014,7 +1006,6 @@ p.copyright a { /* Mobile View */ @media (max-width: 600px) { - body, p, td, @@ -1028,13 +1019,11 @@ p.copyright a { .title-lg { font-size: 40px; font-size: 2.5rem; - font-size: min(2.5rem, 15vw); - /* Cap max font size on mobile, if possible. Allows 200% font-size. */ + font-size: min(2.5rem, 15vw); /* Cap max font size on mobile, if possible. Allows 200% font-size. */ } h2 { - font-size: min(1.5rem, 12vw); - /* Cap max font size on mobile, if possible. Allows 200% font-size. */ + font-size: min(1.5rem, 12vw); /* Cap max font size on mobile, if possible. Allows 200% font-size. */ } /* Header */ @@ -1056,18 +1045,18 @@ p.copyright a { max-width: 75vw; } - header nav>ul>li>* { + header nav > ul > li > * { margin: 0; } - header nav>ul>li>a { + header nav > ul > li > a { margin-bottom: 50px; font-size: 16px; font-size: 1rem; line-height: 1.4em; } - header nav>ul>li:last-child { + header nav > ul > li:last-child { margin: 0; } @@ -1126,7 +1115,7 @@ p.copyright a { align-items: center; } - footer .nav-items ul li>* { + footer .nav-items ul li > * { margin: 20px 0; font-size: 16px; font-size: 1rem; @@ -1168,7 +1157,6 @@ p.copyright a { } @media (max-width: 900px) { - #menu, #mobile-footer-nav-items { display: block; @@ -1179,10 +1167,8 @@ p.copyright a { display: none; flex-direction: column; top: 100%; - left: -20px; - /* overcome the parent container's 20px side padding */ - right: -20px; - /* overcome the parent container's 20px side padding */ + left: -20px; /* overcome the parent container's 20px side padding */ + right: -20px; /* overcome the parent container's 20px side padding */ border-top: 1px solid rgba(242, 242, 242, 0.2); padding: 60px 30px 30px; background-color: #677486; @@ -1214,7 +1200,7 @@ p.copyright a { transition: 0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55); } - .menu-btn__bar+.menu-btn__bar { + .menu-btn__bar + .menu-btn__bar { margin-top: 7px; } @@ -1447,7 +1433,6 @@ p.copyright a { } @media (prefers-reduced-motion: reduce) { - *, ::before, ::after { @@ -1461,29 +1446,28 @@ p.copyright a { } } - - /* Syntax Highlighting */ pre { + margin: 0; border: 1px solid #ccc; word-wrap: break-word; padding: 6px 10px; line-height: 19px; - margin-bottom: 20px + margin-bottom: 20px; } pre code { border: 0; padding: 0; margin: 0; - border-radius: 0 + border-radius: 0; } code { border: 1px solid #eaeaea; margin: 0px 2px; padding: 0px 5px; - font-size: 12px + font-size: 12px; } pre, @@ -1491,25 +1475,25 @@ code { font-family: Consolas, 'Liberation Mono', Courier, monospace; color: #333; background: #f8f8f8; - border-radius: 3px + border-radius: 3px; } pre, pre code { - font-size: 13px + font-size: 13px; } pre .comment { - color: #998 + color: #998; } pre .support { - color: #0086B3 + color: #0086b3; } pre .tag, pre .tag-name { - color: navy + color: navy; } pre .keyword, @@ -1521,45 +1505,43 @@ pre .id, pre .css-value, pre .entity.function, pre .storage.function { - font-weight: bold + font-weight: bold; } pre .css-property, pre .css-value, pre .vendor-fix, pre .support.namespace { - color: #333 + color: #333; } pre .constant.numeric, pre .keyword.unit, pre .hex-color { font-weight: normal; - color: #099 + color: #099; } pre .entity.class { - color: #458 + color: #458; } pre .entity.id, pre .entity.function { - color: #900 + color: #900; } pre .attribute, pre .variable { - color: teal + color: #000000; } pre .string, pre .support.value { font-weight: normal; - color: #d14 + color: #d14; } pre .regexp { - color: #009926 + color: #009926; } - -/* Syntex Highlighting */ \ No newline at end of file diff --git a/src/tools/generate/generate_chapters.js b/src/tools/generate/generate_chapters.js index 2a171ed8f57..6222f8f8366 100644 --- a/src/tools/generate/generate_chapters.js +++ b/src/tools/generate/generate_chapters.js @@ -2,10 +2,8 @@ const fs = require('fs-extra'); const showdown = require('showdown'); const ejs = require('ejs'); const prettier = require('prettier'); -const rainbow = require('rainbow-code'); -const { JSDOM } = require('jsdom'); const { find_markdown_files, get_yearly_configs, size_of, parse_array } = require('./shared'); const { generate_table_of_contents } = require('./generate_table_of_contents'); const { generate_header_links } = require('./generate_header_links'); @@ -17,6 +15,7 @@ const { wrap_tables } = require('./wrap_tables'); const { remove_unnecessary_markup } = require('./remove_unnecessary_markup'); const { generate_ebooks } = require('./generate_ebooks'); const { generate_js } = require('./generate_js'); +const { generate_syntax_highlighting } = require('./generate_syntax_highlighting'); const converter = new showdown.Converter({ tables: true, metadata: true }); converter.setFlavor('github'); @@ -34,9 +33,9 @@ const generate_chapters = async (chapter_match) => { let chapter_config = {}; let featured_quotes = {}; let re; - + configs = await get_yearly_configs(); - for (const year in configs) { + for (const year in configs) { sitemap_languages[year] = configs[year].settings[0].supported_languages; for (const part in configs[year].outline) { for (const chapter in configs[year].outline[part].chapters) { @@ -49,7 +48,7 @@ const generate_chapters = async (chapter_match) => { } } } - + if (chapter_match) { // Remove any trailing .md and replace all paths with brackets to capture components // en/2019/javascript.md -> (en)/(2019)/(javascript).md @@ -119,38 +118,13 @@ const generate_chapters = async (chapter_match) => { }; -const generate_syntex_snippet = (element, body, type) => { - const snippet_clean = element.innerHTML.replace(/</g, '<').replace(/>/g, '>'); - const snippet_converted = rainbow.colorSync(snippet_clean, type); - body = body.replace(element.innerHTML, snippet_converted); - return body; -}; const parse_file = async (markdown,chapter) => { const html = converter.makeHtml(markdown); let body = html; - // Syntax Highlighting - const dom = new JSDOM(body); - const html_codes = dom.window.document.querySelectorAll('code.language-html'); - const css_codes = dom.window.document.querySelectorAll('code.language-css'); - const js_codes = dom.window.document.querySelectorAll('code.language-js'); - const sql_codes = dom.window.document.querySelectorAll('code.language-sql'); - - html_codes.forEach(element => { - body = generate_syntex_snippet(element, body, "html"); - }); - css_codes.forEach(element => { - body = generate_syntex_snippet(element, body, "css"); - }); - js_codes.forEach(element => { - body = generate_syntex_snippet(element, body, "javascript"); - }); - sql_codes.forEach(element => { - body = generate_syntex_snippet(element, body, "sql"); - }); - - + // Syntax Highlighting + body = generate_syntax_highlighting(body); const m = converter.getMetadata(); body = generate_header_links(body); diff --git a/src/tools/generate/generate_syntax_highlighting.js b/src/tools/generate/generate_syntax_highlighting.js new file mode 100644 index 00000000000..da6b5cd2e4c --- /dev/null +++ b/src/tools/generate/generate_syntax_highlighting.js @@ -0,0 +1,44 @@ +const { JSDOM } = require('jsdom'); +const rainbow = require('rainbow-code'); + + +/** + * Generate Syntax highlighting for a particular Languaage (ex: html, css, javascript etc..) + * + * @param {object} dom Object of class JSDOM (Parsed HTML). + * @param {String} body HTML body parsed from convertor + * @param {String} snippet_type snippet type is which type of node to be queried in DOM (like html,css, js, etc. ) + * @param {String} color_rainbow_sync_type string will tell which type of Syntax highlighting shoud be done used for rainbow.colorSync + * @returns body with highlighting syntax snippet of a particular language. + */ +const generate_syntax_highlighting_for_language = (dom, body, snippet_type, color_rainbow_sync_type) => { + const code_snippets = dom.window.document.querySelectorAll(`code.language-${snippet_type}`); + code_snippets.forEach(element => { + const snippet_clean = element.innerHTML.replace(/</g, '<').replace(/>/g, '>'); + const snippet_converted = rainbow.colorSync(snippet_clean, color_rainbow_sync_type); + body = body.replace(element.innerHTML, snippet_converted); + }); + return body; +}; + + +/** + * Generate Syntax highlighting for a HTML, CSS, JavaScript and SQL + * + * @param {String} body HTML body which was parsed from markdown. + * @returns body with highlighting syntax snippet. + */ + +const generate_syntax_highlighting = (body) => { + const dom = new JSDOM(body); + body = generate_syntax_highlighting_for_language(dom, body, "html", "html"); + body = generate_syntax_highlighting_for_language(dom, body, "css", "css"); + body = generate_syntax_highlighting_for_language(dom, body, "js", "javascript"); + body = generate_syntax_highlighting_for_language(dom, body, "sql", "sql"); + return body; +}; + + +module.exports = { + generate_syntax_highlighting +}; From fadf9e20329be7415c872d8fae3824872b8b6743 Mon Sep 17 00:00:00 2001 From: Bharat Agarwal Date: Fri, 27 Nov 2020 11:25:03 +0530 Subject: [PATCH 3/8] colour lint in css fixed --- src/static/css/2019.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/static/css/2019.css b/src/static/css/2019.css index a58e33d76a6..aa137db564f 100644 --- a/src/static/css/2019.css +++ b/src/static/css/2019.css @@ -1533,7 +1533,7 @@ pre .entity.function { pre .attribute, pre .variable { - color: #000000; + color: #000; } pre .string, From 982bc0796f5d91f439a911af6d8a1ba282bd8353 Mon Sep 17 00:00:00 2001 From: Bharat Agarwal Date: Sat, 28 Nov 2020 02:42:14 +0530 Subject: [PATCH 4/8] background and border removed from generated syntax and generate_syntax_highlighting code improved --- src/static/css/2019.css | 16 +++++--------- src/tools/generate/generate_chapters.js | 6 +----- .../generate/generate_syntax_highlighting.js | 21 +++++++++---------- 3 files changed, 16 insertions(+), 27 deletions(-) diff --git a/src/static/css/2019.css b/src/static/css/2019.css index aa137db564f..33c81595855 100644 --- a/src/static/css/2019.css +++ b/src/static/css/2019.css @@ -1449,7 +1449,6 @@ p.copyright a { /* Syntax Highlighting */ pre { margin: 0; - border: 1px solid #ccc; word-wrap: break-word; padding: 6px 10px; line-height: 19px; @@ -1464,23 +1463,14 @@ pre code { } code { - border: 1px solid #eaeaea; margin: 0px 2px; padding: 0px 5px; - font-size: 12px; + font-size: 1rem; } pre, code { - font-family: Consolas, 'Liberation Mono', Courier, monospace; color: #333; - background: #f8f8f8; - border-radius: 3px; -} - -pre, -pre code { - font-size: 13px; } pre .comment { @@ -1515,6 +1505,10 @@ pre .support.namespace { color: #333; } +pre .function.call{ + color: navy; +} + pre .constant.numeric, pre .keyword.unit, pre .hex-color { diff --git a/src/tools/generate/generate_chapters.js b/src/tools/generate/generate_chapters.js index 6222f8f8366..cc50b12f55e 100644 --- a/src/tools/generate/generate_chapters.js +++ b/src/tools/generate/generate_chapters.js @@ -3,7 +3,6 @@ const showdown = require('showdown'); const ejs = require('ejs'); const prettier = require('prettier'); - const { find_markdown_files, get_yearly_configs, size_of, parse_array } = require('./shared'); const { generate_table_of_contents } = require('./generate_table_of_contents'); const { generate_header_links } = require('./generate_header_links'); @@ -118,15 +117,12 @@ const generate_chapters = async (chapter_match) => { }; - const parse_file = async (markdown,chapter) => { const html = converter.makeHtml(markdown); let body = html; - // Syntax Highlighting - body = generate_syntax_highlighting(body); - const m = converter.getMetadata(); + body = generate_syntax_highlighting(body); body = generate_header_links(body); body = generate_figure_ids(body); body = wrap_tables(body); diff --git a/src/tools/generate/generate_syntax_highlighting.js b/src/tools/generate/generate_syntax_highlighting.js index da6b5cd2e4c..1fd31277062 100644 --- a/src/tools/generate/generate_syntax_highlighting.js +++ b/src/tools/generate/generate_syntax_highlighting.js @@ -7,15 +7,16 @@ const rainbow = require('rainbow-code'); * * @param {object} dom Object of class JSDOM (Parsed HTML). * @param {String} body HTML body parsed from convertor - * @param {String} snippet_type snippet type is which type of node to be queried in DOM (like html,css, js, etc. ) - * @param {String} color_rainbow_sync_type string will tell which type of Syntax highlighting shoud be done used for rainbow.colorSync + * @param {String} language language which rainbow syntax highlighting to use + * @param {String} [alias] an optional alias for a language (e.g. js for javascript) * @returns body with highlighting syntax snippet of a particular language. */ -const generate_syntax_highlighting_for_language = (dom, body, snippet_type, color_rainbow_sync_type) => { - const code_snippets = dom.window.document.querySelectorAll(`code.language-${snippet_type}`); +const generate_syntax_highlighting_for_language = (dom, body, language, alias="") => { + const query_selector = alias ? `code.language-${alias}` : `code.language-${language}`; + const code_snippets = dom.window.document.querySelectorAll(query_selector); code_snippets.forEach(element => { const snippet_clean = element.innerHTML.replace(/</g, '<').replace(/>/g, '>'); - const snippet_converted = rainbow.colorSync(snippet_clean, color_rainbow_sync_type); + const snippet_converted = rainbow.colorSync(snippet_clean, language); body = body.replace(element.innerHTML, snippet_converted); }); return body; @@ -28,17 +29,15 @@ const generate_syntax_highlighting_for_language = (dom, body, snippet_type, colo * @param {String} body HTML body which was parsed from markdown. * @returns body with highlighting syntax snippet. */ - const generate_syntax_highlighting = (body) => { const dom = new JSDOM(body); - body = generate_syntax_highlighting_for_language(dom, body, "html", "html"); - body = generate_syntax_highlighting_for_language(dom, body, "css", "css"); - body = generate_syntax_highlighting_for_language(dom, body, "js", "javascript"); - body = generate_syntax_highlighting_for_language(dom, body, "sql", "sql"); + body = generate_syntax_highlighting_for_language(dom, body, "html"); + body = generate_syntax_highlighting_for_language(dom, body, "css" ); + body = generate_syntax_highlighting_for_language(dom, body, "javascript", "js"); + body = generate_syntax_highlighting_for_language(dom, body, "sql"); return body; }; - module.exports = { generate_syntax_highlighting }; From 2ad389e0a9f453f9f27ec8c0e2d2a25096870e20 Mon Sep 17 00:00:00 2001 From: Bharat Agarwal Date: Sat, 28 Nov 2020 02:47:42 +0530 Subject: [PATCH 5/8] CSS lint fixed --- src/static/css/2019.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/static/css/2019.css b/src/static/css/2019.css index 33c81595855..bcdf1432337 100644 --- a/src/static/css/2019.css +++ b/src/static/css/2019.css @@ -1505,7 +1505,7 @@ pre .support.namespace { color: #333; } -pre .function.call{ +pre .function.call { color: navy; } From 003c19e0223945c4cc0b333f0db3c70a27a0ba42 Mon Sep 17 00:00:00 2001 From: Bharat Agarwal Date: Sun, 29 Nov 2020 22:56:55 +0530 Subject: [PATCH 6/8] colors for code highlighting changed in 2019.css file --- src/static/css/2019.css | 14 +++++--------- src/tools/generate/generate_syntax_highlighting.js | 2 +- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/static/css/2019.css b/src/static/css/2019.css index bcdf1432337..893e976e220 100644 --- a/src/static/css/2019.css +++ b/src/static/css/2019.css @@ -1468,13 +1468,8 @@ code { font-size: 1rem; } -pre, -code { - color: #333; -} - pre .comment { - color: #998; + color: #006400; } pre .support { @@ -1483,7 +1478,7 @@ pre .support { pre .tag, pre .tag-name { - color: navy; + color: #4a3244; } pre .keyword, @@ -1496,6 +1491,7 @@ pre .css-value, pre .entity.function, pre .storage.function { font-weight: bold; + color: #4a3244; } pre .css-property, @@ -1513,7 +1509,7 @@ pre .constant.numeric, pre .keyword.unit, pre .hex-color { font-weight: normal; - color: #099; + color: #00f; } pre .entity.class { @@ -1533,7 +1529,7 @@ pre .variable { pre .string, pre .support.value { font-weight: normal; - color: #d14; + color: #2c4a73; } pre .regexp { diff --git a/src/tools/generate/generate_syntax_highlighting.js b/src/tools/generate/generate_syntax_highlighting.js index 1fd31277062..dde9bd42c1e 100644 --- a/src/tools/generate/generate_syntax_highlighting.js +++ b/src/tools/generate/generate_syntax_highlighting.js @@ -12,7 +12,7 @@ const rainbow = require('rainbow-code'); * @returns body with highlighting syntax snippet of a particular language. */ const generate_syntax_highlighting_for_language = (dom, body, language, alias="") => { - const query_selector = alias ? `code.language-${alias}` : `code.language-${language}`; + const query_selector = alias ? `code.language-${language}, code.language-${alias}` : `code.language-${language}`; const code_snippets = dom.window.document.querySelectorAll(query_selector); code_snippets.forEach(element => { const snippet_clean = element.innerHTML.replace(/</g, '<').replace(/>/g, '>'); From 1a1ad4460475758d9ab9a5cbe56b9c462c22464e Mon Sep 17 00:00:00 2001 From: Bharat Agarwal Date: Mon, 30 Nov 2020 01:46:23 +0530 Subject: [PATCH 7/8] syntex highlighting 'string' color changed and padding removed --- src/static/css/2019.css | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/static/css/2019.css b/src/static/css/2019.css index 893e976e220..d560658983a 100644 --- a/src/static/css/2019.css +++ b/src/static/css/2019.css @@ -1463,8 +1463,6 @@ pre code { } code { - margin: 0px 2px; - padding: 0px 5px; font-size: 1rem; } @@ -1529,7 +1527,7 @@ pre .variable { pre .string, pre .support.value { font-weight: normal; - color: #2c4a73; + color: #e74c3c; } pre .regexp { From 84442d794576d6202360f0c45719b8ccbd59a1e5 Mon Sep 17 00:00:00 2001 From: Bharat Agarwal Date: Mon, 30 Nov 2020 02:24:44 +0530 Subject: [PATCH 8/8] syntex highlighting color changed to #b31107 --- src/static/css/2019.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/static/css/2019.css b/src/static/css/2019.css index d560658983a..9e1b376a1c4 100644 --- a/src/static/css/2019.css +++ b/src/static/css/2019.css @@ -1527,7 +1527,7 @@ pre .variable { pre .string, pre .support.value { font-weight: normal; - color: #e74c3c; + color: #b31107; } pre .regexp {