Line number fix (#79)

This fixes [prism#1946](PrismJS/prism#1946). The problem was that the `<code>` element nested inside the `<pre>` element has to have the same font size as the `pre`. I added a little rule to nearly every theme to enforce just this. ```css pre > code[class*="language-"] { font-size: 1em; } ``` --- This also enforces tabs for indentation for all theme.
PrismJS · Sep 24, 2019 · d42d341 · d42d341
1 parent 87a2c4a
commit d42d341
Show file tree

Hide file tree

Showing 16 changed files with 781 additions and 735 deletions.
diff --git a/themes/prism-atom-dark.css b/themes/prism-atom-dark.css
@@ -8,7 +8,7 @@ code[class*="language-"],
 pre[class*="language-"] {
 	color: #c5c8c6;
 	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
-    font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
+	font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
 	direction: ltr;
 	text-align: left;
 	white-space: pre;
@@ -63,7 +63,7 @@ pre[class*="language-"] {
 .token.property,
 .token.keyword,
 .token.tag {
-    color: #96CBFE;
+	color: #96CBFE;
 }
 
 .token.class-name {
@@ -73,7 +73,7 @@ pre[class*="language-"] {
 
 .token.boolean,
 .token.constant {
-    color: #99CC99;
+	color: #99CC99;
 }
 
 .token.symbol,
@@ -99,16 +99,16 @@ pre[class*="language-"] {
 }
 
 .token.operator {
-    color: #EDEDED;
+	color: #EDEDED;
 }
 
 .token.entity {
-    color: #FFFFB6;
-    /* text-decoration: underline; */
+	color: #FFFFB6;
+	/* text-decoration: underline; */
 }
 
 .token.url {
-    color: #96CBFE;
+	color: #96CBFE;
 }
 
 .language-css .token.string,
@@ -118,15 +118,15 @@ pre[class*="language-"] {
 
 .token.atrule,
 .token.attr-value {
-    color: #F9EE98;
+	color: #F9EE98;
 }
 
 .token.function {
 	color: #DAD085;
 }
 
 .token.regex {
-    color: #E9C062;
+	color: #E9C062;
 }
 
 .token.important {

diff --git a/themes/prism-base16-ateliersulphurpool.light.css b/themes/prism-base16-ateliersulphurpool.light.css
@@ -9,164 +9,168 @@ Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/b
 */
 code[class*="language-"],
 pre[class*="language-"] {
-  font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
-  font-size: 14px;
-  line-height: 1.375;
-  direction: ltr;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-  background: #f5f7ff;
-  color: #5e6687;
+	font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+	font-size: 14px;
+	line-height: 1.375;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+	background: #f5f7ff;
+	color: #5e6687;
+}
+
+pre > code[class*="language-"] {
+	font-size: 1em;
 }
 
 pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-  text-shadow: none;
-  background: #dfe2f1;
+	text-shadow: none;
+	background: #dfe2f1;
 }
 
 pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 code[class*="language-"]::selection, code[class*="language-"] ::selection {
-  text-shadow: none;
-  background: #dfe2f1;
+	text-shadow: none;
+	background: #dfe2f1;
 }
 
 /* Code blocks */
 pre[class*="language-"] {
-  padding: 1em;
-  margin: .5em 0;
-  overflow: auto;
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
 }
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
-  padding: .1em;
-  border-radius: .3em;
+	padding: .1em;
+	border-radius: .3em;
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: #898ea4;
+	color: #898ea4;
 }
 
 .token.punctuation {
-  color: #5e6687;
+	color: #5e6687;
 }
 
 .token.namespace {
-  opacity: .7;
+	opacity: .7;
 }
 
 .token.operator,
 .token.boolean,
 .token.number {
-  color: #c76b29;
+	color: #c76b29;
 }
 
 .token.property {
-  color: #c08b30;
+	color: #c08b30;
 }
 
 .token.tag {
-  color: #3d8fd1;
+	color: #3d8fd1;
 }
 
 .token.string {
-  color: #22a2c9;
+	color: #22a2c9;
 }
 
 .token.selector {
-  color: #6679cc;
+	color: #6679cc;
 }
 
 .token.attr-name {
-  color: #c76b29;
+	color: #c76b29;
 }
 
 .token.entity,
 .token.url,
 .language-css .token.string,
 .style .token.string {
-  color: #22a2c9;
+	color: #22a2c9;
 }
 
 .token.attr-value,
 .token.keyword,
 .token.control,
 .token.directive,
 .token.unit {
-  color: #ac9739;
+	color: #ac9739;
 }
 
 .token.statement,
 .token.regex,
 .token.atrule {
-  color: #22a2c9;
+	color: #22a2c9;
 }
 
 .token.placeholder,
 .token.variable {
-  color: #3d8fd1;
+	color: #3d8fd1;
 }
 
 .token.deleted {
-  text-decoration: line-through;
+	text-decoration: line-through;
 }
 
 .token.inserted {
-  border-bottom: 1px dotted #202746;
-  text-decoration: none;
+	border-bottom: 1px dotted #202746;
+	text-decoration: none;
 }
 
 .token.italic {
-  font-style: italic;
+	font-style: italic;
 }
 
 .token.important,
 .token.bold {
-  font-weight: bold;
+	font-weight: bold;
 }
 
 .token.important {
-  color: #c94922;
+	color: #c94922;
 }
 
 .token.entity {
-  cursor: help;
+	cursor: help;
 }
 
 pre > code.highlight {
-  outline: 0.4em solid #c94922;
-  outline-offset: .4em;
+	outline: 0.4em solid #c94922;
+	outline-offset: .4em;
 }
 
 /* overrides color-values for the Line Numbers plugin
  * http://prismjs.com/plugins/line-numbers/
  */
 .line-numbers .line-numbers-rows {
-  border-right-color: #dfe2f1;
+	border-right-color: #dfe2f1;
 }
 
 .line-numbers-rows > span:before {
-  color: #979db4;
+	color: #979db4;
 }
 
 /* overrides color-values for the Line Highlight plugin
  * http://prismjs.com/plugins/line-highlight/
  */
 .line-highlight {
-  background: rgba(107, 115, 148, 0.2);
-  background: -webkit-linear-gradient(left, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
-  background: linear-gradient(to right, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
+	background: rgba(107, 115, 148, 0.2);
+	background: -webkit-linear-gradient(left, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
+	background: linear-gradient(to right, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
 }
diff --git a/themes/prism-cb.css b/themes/prism-cb.css
@@ -1,13 +1,13 @@
 /*
- * Based on Plugin: Syntax Highlighter CB 
+ * Based on Plugin: Syntax Highlighter CB
  * Plugin URI: http://wp.tutsplus.com/tutorials/plugins/adding-a-syntax-highlighter-shortcode-using-prism-js
- * Description: Highlight your code snippets with an easy to use shortcode based on Lea Verou's Prism.js.  
- * Version: 1.0.0 
- * Author: c.bavota 
+ * Description: Highlight your code snippets with an easy to use shortcode based on Lea Verou's Prism.js.
+ * Version: 1.0.0
+ * Author: c.bavota
  * Author URI: http://bavotasan.comhttp://wp.tutsplus.com/tutorials/plugins/adding-a-syntax-highlighter-shortcode-using-prism-js/ */
 /* http://cbavota.bitbucket.org/syntax-highlighter/  */
 
-/* =====   ===== */ 
+/* =====   ===== */
 code[class*="language-"],
 pre[class*="language-"] {
 	color: #fff;
@@ -33,8 +33,8 @@ pre[class*="language-"] {
 }
 
 pre[class*="language-"] code {
-    float: left;
-    padding: 0 15px 0 0;
+	float: left;
+	padding: 0 15px 0 0;
 }
 
 pre[class*="language-"],
@@ -143,26 +143,26 @@ pre[data-line] {
 
 .line-highlight:before,
 .line-highlight[data-end]:after {
-    content: attr(data-start);
-    position: absolute;
-    top: .3em;
-    left: .6em;
-    min-width: 1em;
-    padding: 0 .5em;
-    background-color: rgba(255,255,255,.3);
-    color: #fff;
-    font: bold 65%/1.5 sans-serif;
-    text-align: center;
-    -moz-border-radius: 8px;
-    -webkit-border-radius: 8px;
-    border-radius: 8px;
-    text-shadow: none;
+	content: attr(data-start);
+	position: absolute;
+	top: .3em;
+	left: .6em;
+	min-width: 1em;
+	padding: 0 .5em;
+	background-color: rgba(255,255,255,.3);
+	color: #fff;
+	font: bold 65%/1.5 sans-serif;
+	text-align: center;
+	-moz-border-radius: 8px;
+	-webkit-border-radius: 8px;
+	border-radius: 8px;
+	text-shadow: none;
 }
 
 .line-highlight[data-end]:after {
-    content: attr(data-end);
-    top: auto;
-    bottom: .4em;
+	content: attr(data-end);
+	top: auto;
+	bottom: .4em;
 }
 
 /* for line numbers */
@@ -171,6 +171,6 @@ pre[data-line] {
 }
 
 .line-numbers-rows span {
-    padding-right: 10px;
-    border-right: 3px #d9d336 solid;
+	padding-right: 10px;
+	border-right: 3px #d9d336 solid;
 }