From 53c4d9551761e533ead9bf41655e2cd609df9fb3 Mon Sep 17 00:00:00 2001 From: Tony Ruscoe Date: Wed, 12 Jan 2022 13:47:29 +0000 Subject: [PATCH] Remove prettyprint from HTML/CSS Style Guide This is because the internal style guide does not use prettyprint. --- htmlcssguide.html | 134 ++++++++++++++++++++++----------------------- include/jsguide.js | 9 ++- 2 files changed, 73 insertions(+), 70 deletions(-) diff --git a/htmlcssguide.html b/htmlcssguide.html index 58e6c122a..3c823e5c5 100644 --- a/htmlcssguide.html +++ b/htmlcssguide.html @@ -31,25 +31,25 @@

2.1.1 Protocol

files, style sheets, and scripts, unless the respective files are not available over HTTPS.

-
<!-- Not recommended: omits the protocol -->
+
<!-- Not recommended: omits the protocol -->
 <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
 
 <!-- Not recommended: uses HTTP -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
 

 
-
<!-- Recommended -->
+
<!-- Recommended -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
 

 
-
/* Not recommended: omits the protocol */
+
/* Not recommended: omits the protocol */
 @import '//fonts.googleapis.com/css?family=Open+Sans';
 
 /* Not recommended: uses HTTP */
 @import 'http://fonts.googleapis.com/css?family=Open+Sans';
 

 
-
/* Recommended */
+
/* Recommended */
 @import 'https://fonts.googleapis.com/css?family=Open+Sans';
 

 
@@ -61,13 +61,13 @@ 
2.2.1 Indentation

 
 
Don’t use tabs or mix tabs and spaces for indentation.

 
-
<ul>
+
<ul>
   <li>Fantastic
   <li>Great
 </ul>
 

 
-
.example {
+
.example {
   color: blue;
 }
 

@@ -80,19 +80,19 @@ 
2.2.2 Capitalization

 attribute values (unless text/CDATA), CSS selectors, properties, and property
 values (with the exception of strings).

 
-
<!-- Not recommended -->
+
<!-- Not recommended -->
 <A HREF="/">Home</A>
 

 
-
<!-- Recommended -->
+
<!-- Recommended -->
 <img src="google.png" alt="Google">
 

 
-
/* Not recommended */
+
/* Not recommended */
 color: #E5E5E5;
 

 
-
/* Recommended */
+
/* Recommended */
 color: #e5e5e5;
 

 
@@ -102,11 +102,11 @@ 
2.2.3 Trailing Whitespace

 
 
Trailing white spaces are unnecessary and can complicate diffs.

 
-
<!-- Not recommended -->
+
<!-- Not recommended -->
 <p>What?_
 

 
-
<!-- Recommended -->
+
<!-- Recommended -->
 <p>Yes please.
 

 
@@ -149,11 +149,11 @@ 
2.3.3 Action Items

 
 
Append action items after a colon as in TODO: action item.

 
-
{# TODO(john.doe): revisit centering #}
+
{# TODO(john.doe): revisit centering #}
 <center>Test</center>
 

 
-
<!-- TODO: remove optional tags -->
+
<!-- TODO: remove optional tags -->
 <ul>
   <li>Apples</li>
   <li>Oranges</li>
@@ -194,12 +194,12 @@ 
3.1.2 HTML Validity

 learning about technical requirements and constraints, and that ensures proper
 HTML usage.

 
-
<!-- Not recommended -->
+
<!-- Not recommended -->
 <title>Test</title>
 <article>This is only a test.
 

 
-
<!-- Recommended -->
+
<!-- Recommended -->
 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>Test</title>
@@ -217,11 +217,11 @@ 
3.1.3 Semantics

 
Using HTML according to its purpose is important for accessibility, reuse, and
 code efficiency reasons.

 
-
<!-- Not recommended -->
+
<!-- Not recommended -->
 <div onclick="goToRecommendations();">All recommendations</div>
 

 
-
<!-- Recommended -->
+
<!-- Recommended -->
 <a href="recommendations/">All recommendations</a>
 

 
@@ -241,11 +241,11 @@ 
3.1.4 Multimedia Fallback

 whose purpose is purely decorative which you cannot immediately use CSS for, use
 no alternative text, as in alt="".)

 
-
<!-- Not recommended -->
+
<!-- Not recommended -->
 <img src="spreadsheet.png">
 

 
-
<!-- Recommended -->
+
<!-- Recommended -->
 <img src="spreadsheet.png" alt="Spreadsheet screenshot.">
 

 
@@ -268,7 +268,7 @@ 
3.1.5 Separation of Concerns

 maintenance reasons. It is always more expensive to change HTML documents and
 templates than it is to update style sheets and scripts.

 
-
<!-- Not recommended -->
+
<!-- Not recommended -->
 <!DOCTYPE html>
 <title>HTML sucks</title>
 <link rel="stylesheet" href="base.css" media="screen">
@@ -281,7 +281,7 @@ 
3.1.5 Separation of Concerns

   my website without doing everything all over again!</center>
 

 
-
<!-- Recommended -->
+
<!-- Recommended -->
 <!DOCTYPE html>
 <title>My first CSS-only redesign</title>
 <link rel="stylesheet" href="default.css">
@@ -303,11 +303,11 @@ 
3.1.6 Entity References

 
The only exceptions apply to characters with special meaning in HTML (like <
 and &) as well as control or “invisible” characters (like no-break spaces).

 
-
<!-- Not recommended -->
+
<!-- Not recommended -->
 The currency symbol for the Euro is &ldquo;&eur;&rdquo;.
 

 
-
<!-- Recommended -->
+
<!-- Recommended -->
 The currency symbol for the Euro is “€”.
 

 
@@ -324,7 +324,7 @@ 
3.1.7 Optional Tags

 For consistency and simplicity reasons it’s best served omitting all optional
 tags, not just a selection.)

 
-
<!-- Not recommended -->
+
<!-- Not recommended -->
 <!DOCTYPE html>
 <html>
   <head>
@@ -336,7 +336,7 @@ 
3.1.7 Optional Tags

 </html>
 

 
-
<!-- Recommended -->
+
<!-- Recommended -->
 <!DOCTYPE html>
 <title>Saving money, saving bytes</title>
 <p>Qed.
@@ -354,21 +354,21 @@ 
3.1.8 type Attributes

 and text/javascript
 as defaults. This can be safely done even for older browsers.

 
-
<!-- Not recommended -->
+
<!-- Not recommended -->
 <link rel="stylesheet" href="https://www.google.com/css/maia.css"
     type="text/css">
 

 
-
<!-- Recommended -->
+
<!-- Recommended -->
 <link rel="stylesheet" href="https://www.google.com/css/maia.css">
 

 
-
<!-- Not recommended -->
+
<!-- Not recommended -->
 <script src="https://www.google.com/js/gweb/analytics/autotrack.js"
     type="text/javascript"></script>
 

 
-
<!-- Recommended -->
+
<!-- Recommended -->
 <script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>
 

 
@@ -389,19 +389,19 @@ 
3.2.1 General Formatting

 put all li elements in one line. A linter is encouraged to throw a warning
 instead of an error.)

 
-
<blockquote>
+
<blockquote>
   <p><em>Space</em>, the final frontier.</p>
 </blockquote>
 

 
-
<ul>
+
<ul>
   <li>Moe
   <li>Larry
   <li>Curly
 </ul>
 

 
-
<table>
+
<table>
   <thead>
     <tr>
       <th scope="col">Income
@@ -423,12 +423,12 @@ 
3.2.2 HTML Line-Wrapping

 
When line-wrapping, each continuation line should be indented at least 4
 additional spaces from the original line.

 
-
<md-progress-circular md-mode="indeterminate" class="md-accent"
+
<md-progress-circular md-mode="indeterminate" class="md-accent"
     ng-show="ctrl.loading" md-diameter="35">
 </md-progress-circular>
 

 
-
<md-progress-circular
+
<md-progress-circular
     md-mode="indeterminate"
     class="md-accent"
     ng-show="ctrl.loading"
@@ -436,7 +436,7 @@ 
3.2.2 HTML Line-Wrapping

 </md-progress-circular>
 

 
-
<md-progress-circular md-mode="indeterminate"
+
<md-progress-circular md-mode="indeterminate"
                       class="md-accent"
                       ng-show="ctrl.loading"
                       md-diameter="35">
@@ -450,11 +450,11 @@ 
3.2.3 HTML Quotation Marks

 
Use double ("") rather than single quotation marks ('') around attribute
 values.

 
-
<!-- Not recommended -->
+
<!-- Not recommended -->
 <a class='maia-button maia-button-secondary'>Sign in</a>
 

 
-
<!-- Recommended -->
+
<!-- Recommended -->
 <a class="maia-button maia-button-secondary">Sign in</a>
 

 
@@ -495,7 +495,7 @@ 
4.1.2 ID and Class Naming

 
Using functional or generic names reduces the probability of unnecessary
 document or template changes.

 
-
/* Not recommended: meaningless */
+
/* Not recommended: meaningless */
 #yee-1901 {}
 
 /* Not recommended: presentational */
@@ -503,7 +503,7 @@ 
4.1.2 ID and Class Naming

 .clear {}
 

 
-
/* Recommended: specific */
+
/* Recommended: specific */
 #gallery {}
 #login {}
 .video {}
@@ -522,12 +522,12 @@ 
4.1.3 ID and Class Name Style

 
Using ID and class names this way contributes to acceptable levels of
 understandability and code efficiency.

 
-
/* Not recommended */
+
/* Not recommended */
 #navigation {}
 .atr {}
 

 
-
/* Recommended */
+
/* Recommended */
 #nav {}
 .author {}
 

@@ -541,12 +541,12 @@ 
4.1.4 Type Selectors

 
 
Avoiding unnecessary ancestor selectors is useful for performance reasons.

 
-
/* Not recommended */
+
/* Not recommended */
 ul#example {}
 div.error {}
 

 
-
/* Recommended */
+
/* Recommended */
 #example {}
 .error {}
 

@@ -561,7 +561,7 @@ 
4.1.5 Shorthand Properties

 
 
Using shorthand properties is useful for code efficiency and understandability.

 
-
/* Not recommended */
+
/* Not recommended */
 border-top-style: none;
 font-family: palatino, georgia, serif;
 font-size: 100%;
@@ -572,7 +572,7 @@ 
4.1.5 Shorthand Properties

 padding-top: 0;
 

 
-
/* Recommended */
+
/* Recommended */
 border-top: 0;
 font: 100%/1.6 palatino, georgia, serif;
 padding: 0 1em 2em;
@@ -584,7 +584,7 @@ 
4.1.6 0 and Units

 
 
Do not use units after 0 values unless they are required.

 
-
flex: 0px; /* This flex-basis component requires a unit. */
+
flex: 0px; /* This flex-basis component requires a unit. */
 flex: 1 1 0px; /* Not ambiguous without the unit, but needed in IE11. */
 margin: 0;
 padding: 0;
@@ -596,7 +596,7 @@ 
4.1.7 Leading 0s

 
 
Do not put 0s in front of values or lengths between -1 and 1.

 
-
font-size: .8em;
+
font-size: .8em;
 

 
 
4.1.8 Hexadecimal Notation

@@ -606,11 +606,11 @@ 
4.1.8 Hexadecimal Notation

 
For color values that permit it, 3 character hexadecimal notation is shorter and
 more succinct.

 
-
/* Not recommended */
+
/* Not recommended */
 color: #eebbcc;
 

 
-
/* Recommended */
+
/* Recommended */
 color: #ebc;
 

 
@@ -625,7 +625,7 @@ 
4.1.9 Prefixes

 
Using namespaces helps preventing naming conflicts and can make maintenance
 easier, for example in search and replace operations.

 
-
.adw-help {} /* AdWords */
+
.adw-help {} /* AdWords */
 #maia-note {} /* Maia */
 

 
@@ -637,14 +637,14 @@ 
4.1.10 ID and Class Name Delimiters

 (including none at all) other than hyphens, in order to improve understanding
 and scannability.

 
-
/* Not recommended: does not separate the words “demo” and “image” */
+
/* Not recommended: does not separate the words “demo” and “image” */
 .demoimage {}
 
 /* Not recommended: uses underscore instead of hyphen */
 .error_status {}
 

 
-
/* Recommended */
+
/* Recommended */
 #video-id {}
 .ads-sample {}
 

@@ -676,7 +676,7 @@ 
4.2.1 Declaration Order

 vendor-specific prefixes for a certain CSS property should be kept sorted (e.g.
 -moz prefix comes before -webkit).

 
-
background: fuchsia;
+
background: fuchsia;
 border: 1px solid;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
@@ -694,7 +694,7 @@ 
4.2.2 Block Content Indentation

 that is rules within rules as well as declarations, so to reflect hierarchy and
 improve understanding.

 
-
@media screen, projection {
+
@media screen, projection {
 
   html {
     background: #fff;
@@ -711,14 +711,14 @@ 
4.2.3 Declaration Stops

 
End every declaration with a semicolon for consistency and extensibility
 reasons.

 
-
/* Not recommended */
+
/* Not recommended */
 .test {
   display: block;
   height: 100px
 }
 

 
-
/* Recommended */
+
/* Recommended */
 .test {
   display: block;
   height: 100px;
@@ -732,13 +732,13 @@ 
4.2.4 Property Name Stops

 
Always use a single space between property and value (but no space between
 property and colon) for consistency reasons.

 
-
/* Not recommended */
+
/* Not recommended */
 h3 {
   font-weight:bold;
 }
 

 
-
/* Recommended */
+
/* Recommended */
 h3 {
   font-weight: bold;
 }
@@ -754,7 +754,7 @@ 
4.2.5 Declaration Block Separation

 
The opening brace should be on the same line as the last selector in a given
 rule.

 
-
/* Not recommended: missing space */
+
/* Not recommended: missing space */
 #video{
   margin-top: 1em;
 }
@@ -766,7 +766,7 @@ 
4.2.5 Declaration Block Separation

 }
 

 
-
/* Recommended */
+
/* Recommended */
 #video {
   margin-top: 1em;
 }
@@ -778,13 +778,13 @@ 
4.2.6 Selector and Declaration Sepa
 
 
Always start a new line for each selector and declaration.

 
-
/* Not recommended */
+
/* Not recommended */
 a:focus, a:active {
   position: relative; top: 1px;
 }
 

 
-
/* Recommended */
+
/* Recommended */
 h1,
 h2,
 h3 {
@@ -799,7 +799,7 @@ 
4.2.7 Rule Separation

 
 
Always put a blank line (two line breaks) between rules.

 
-
html {
+
html {
   background: #fff;
 }
 
@@ -819,7 +819,7 @@ 
4.2.8 CSS Quotation Marks

 
Exception: If you do need to use the @charset rule, use double quotation
 marks—single quotation marks are not permitted.

 
-
/* Not recommended */
+
/* Not recommended */
 @import url("https://www.google.com/css/maia.css");
 
 html {
@@ -827,7 +827,7 @@ 
4.2.8 CSS Quotation Marks

 }
 

 
-
/* Recommended */
+
/* Recommended */
 @import url(https://www.google.com/css/maia.css);
 
 html {
@@ -844,7 +844,7 @@ 
4.3.1 Section Comments

 
If possible, group style sheet sections together by using comments. Separate
 sections with new lines.

 
-
/* Header */
+
/* Header */
 
 #adw-header {}
 
diff --git a/include/jsguide.js b/include/jsguide.js
index 7a5dcf9ab..c5eea05fd 100644
--- a/include/jsguide.js
+++ b/include/jsguide.js
@@ -41,9 +41,12 @@ window.initStyleGuide = function(init) {
   // properly. Fix it by moving the code directly into the pre.
   find('pre > code', function(code) {
     var pre = code.parentElement;
-    // internal TS style guide does not want prettyprint
-    if (code.classList.contains("language-ts")) {
-      code.classList.add("prettyprint");
+    // Internal HTML/CSS & TS style guides do not use prettyprint.
+    if (code.classList.contains('language-css') ||
+        code.classList.contains('language-django') ||
+        code.classList.contains('language-html') ||
+        code.classList.contains('language-ts')) {
+      code.classList.add('prettyprint');
     }
     pre.className = code.className;
     pre.innerHTML = code.innerHTML;