Commit 351b011f857146f51a8153f5744f8347d6014ac6
2012-07-16T14:49:29
Style && docs tweaks — more coming soon
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117
diff --git a/plugins/line-highlight/index.html b/plugins/line-highlight/index.html
index f16c36f..917722f 100644
--- a/plugins/line-highlight/index.html
+++ b/plugins/line-highlight/index.html
@@ -13,7 +13,7 @@
<body>
<header><div class="wrapper">
- <h1><img src="../../logo.svg" alt="Prism" /></h1>
+ <h1><img src="../../logo.svg" alt="Prism" /> plugins</h1>
<h2>Line highlight plugin</h2>
<p>Highlights specific lines and/or line ranges.</p>
@@ -22,8 +22,12 @@
<section>
<h1>How to use</h1>
- <p>To use this plugin, your code samples need to use a <code><pre></code> element, with the <code>prism</code> class.
- The <code><pre></code> element may include <code><code></code> elements as children, but it’s not a requirement.</p>
+ <p>To use this plugin, your code samples need to use a <code><pre></code> element, with the <code>prism</code> class and it should include
+ one or more <code><code></code> element(s) as children. For example:</p>
+ <pre class="prism lang-markup"><code><pre class="prism language-javascript"><code>console.log("this plugin is awesome!");</code></pre></code></pre>
+ <p>This is also valid:
+ <pre class="prism language-markup"><code><pre class="prism"><code class="language-javascript">console.log("this plugin is awesome!");</code></pre></code></pre>
+
<p>You specify the lines to be highlighted through the <code>data-line</code> attribute on the <code><pre></code> element, in the following simple format:</p>
<ul>
<li>A single number refers to the line with that number</li>
diff --git a/prism.js b/prism.js
index 54ae80c..5186d2c 100644
--- a/prism.js
+++ b/prism.js
@@ -6,6 +6,9 @@
(function(){
+// Private helper vars
+var langRegex = /lang(?:uage)?-(\w+)/i
+
var _ = self.Prism = {
tokens: {
url: /[a-z]{3,4}s?:\/\/\S+/g
@@ -30,7 +33,10 @@ var _ = self.Prism = {
return;
}
- var language = (element.className.match(/language-(\w+)/i) || [])[1],
+ var language = (
+ element.className.match(langRegex)
+ || element.parentNode.className.match(langRegex)
+ || [])[1],
tokens = _.languages[language];
if (!tokens) {
diff --git a/style.css b/style.css
index 3d41b2f..7003fd4 100644
--- a/style.css
+++ b/style.css
@@ -4,7 +4,7 @@
Shared styles
*/
-h1,
+section h1,
#features li strong {
font: italic 100% Baskerville, Palatino Linotype, Georgia, serif;
}
@@ -44,7 +44,7 @@ a {
color: inherit;
}
-h1 {
+section h1 {
font-size: 300%;
}
@@ -56,7 +56,8 @@ p {
margin: 1em 0;
}
-h1, h2 {
+section h1,
+h2 {
margin: 1em 0 .3em;
}
@@ -103,20 +104,24 @@ header:after {
overflow: hidden;
}
- header .intro > h1,
- html.simple header h1 {
+ header h1 {
float: left;
- margin: 0;
+ margin-right: 30px;
+ color: #eda725;
+ text-align: center;
+ font-size: 140%;
+ text-transform: uppercase;
+ letter-spacing: .25em;
}
header h1 + h2 {
margin-top: 0;
}
- header .intro img,
- html.simple header img {
+ header img {
+ display: block;
width: 150px;
- margin-right: 30px;
+ margin-bottom: .3em;
}
header .intro p {