Website: style example code

3 files changed, 87 insertions, 53 deletions

diff --git a/website/resources/css/custom.css b/website/resources/css/custom.css
index c9c4924e..2588ae66 100644
--- a/website/resources/css/custom.css
+++ b/website/resources/css/custom.css
@@ -236,6 +236,40 @@ div.snippet code {
 	word-break: break-word;
 }
 
+
+ol.snippet {
+	background: repeat-y url(/img/line-numbers.png);
+	padding-left: 3em;
+	list-style-type: decimal;
+}
+
+ol.snippet li {
+	font-size: 14px;
+	font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+	color: #9898A8;
+}
+
+ol.snippet li code {
+	word-break: break-word;
+	padding: 0;
+}
+
+ol.snippet.oneliner, ol.snippet.cmd {
+	list-style-type: none;
+}
+
+ol.snippet.oneliner li, ol.snippet.cmd li {
+	text-indent: -1.7em;
+}
+
+ol.snippet.oneliner li:before {
+	content: "#\A0\A0";
+}
+
+ol.snippet.cmd li:before {
+	content: ">\A0\A0";
+}
+
 .fork-me {
 	position: fixed;
 	width: 150px;
diff --git a/website/resources/img/line-numbers.png b/website/resources/img/line-numbers.png
new file mode 100644
index 00000000..414b9596
--- /dev/null
+++ b/website/resources/img/line-numbers.png
diff --git a/website/templates/features/configuration.html b/website/templates/features/configuration.html
index 62bac24a..4d7b1547 100644
--- a/website/templates/features/configuration.html
+++ b/website/templates/features/configuration.html
@@ -14,9 +14,9 @@
 			Usually, a user of lombok puts a <code>lombok.config</code> file with their preferences in a workspace or project root directory, with the special <code>config.stopBubbling = true</code> key to tell lombok this is your root directory. You can then create <code>lombok.config</code> files in any subdirectories (generally representing projects or source packages) with different settings.
 		</p><p>
 			An up to date list of all configuration keys supported by your version of lombok can be generated by running:
-			<div class="snippet example">
-				<code>java -jar lombok.jar config -g --verbose</code>
-			</div>
+			<ol class="snippet example cmd">
+				<li><code>java -jar lombok.jar config -g --verbose</code></li>
+			</ol>
 			The output of the <em>config</em> tool is itself a valid <code>lombok.config</code> file.<br />
 			The <em>config</em> tool can also be used to display the complete lombok configuration used for any given directory or source file by supplying these as arguments.
 		</p><p>
@@ -47,24 +47,24 @@
 			</dl>
 		</p><p>
 			Configuration files are hierarchical: Any configuration setting applies to all source files in that directory, and all source files in subdirectories, but configuration settings closer to the source file take precedence. For example, if you have in <code>/Users/me/projects/lombok.config</code> the following:
-			<div class="snippet example">
-				<code>lombok.log.fieldName = foobar</code>
-			</div>
+			<ol class="snippet example oneliner">
+				<li><code>lombok.log.fieldName = foobar</code></li>
+			</ol>
 			and in <code>/Users/me/projects/MyProject/lombok.config</code> you have:
-			<div class="snippet example">
-				<code>lombok.log.fieldName = xyzzy</code>
-			</div>
+			<ol class="snippet example oneliner">
+				<li><code>lombok.log.fieldName = xyzzy</code></li>
+			</ol>
 			Then the various <a ng-click="toFeature('log')"><code>@Log</code></a> annotations will use <code>foobar</code> instead of the default <code>log</code> as a field name to generate in all your projects, except for your project in <code>/Users/me/projects/MyProject</code>, where <code>xyzzy</code> is used instead.
 		</p><p>
 			To restore a configuration key set by a parent config file back to the default, the <code>clear</code> option can be used. For example, if a parent configuration file has configured all use of <code>val</code> to emit a warning, you can turn off the warnings for a subdirectory by including in it a <code>lombok.config</code> file with:
-			<div class="snippet example">
-				<code>clear lombok.val.flagUsage</code>
-			</div>
+			<ol class="snippet example oneliner">
+				<li><code>clear lombok.val.flagUsage</code></li>
+			</ol>
 		</p><p>
 			Some configuration keys take lists. For lists, use <code>+=</code> to add an entry. You can remove a single item from the list (useful to undo a parent configuration file's setting) with <code>-=</code>. For example:
-			<div class="snippet example">
-				<code>lombok.accessors.prefix += m_</code>
-			</div>
+			<ol class="snippet example oneliner">
+				<li><code>lombok.accessors.prefix += m_</code></li>
+			</ol>
 		</p><p>
 			Comments can be included in <code>lombok.config</code> files; any line that starts with <code>#</code> is considered a comment.
 		</p>
@@ -75,28 +75,28 @@
 
 		<p>
 			To stop lombok from looking at parent directories for more configuration files, the special key:
-			<div class="snippet example">
-				<code>config.stopBubbling = true</code>
-			</div>
+			<ol class="snippet example oneliner">
+				<li><code>config.stopBubbling = true</code></li>
+			</ol>
 			can be included. We suggest you put this in the root of your workspace directory.
 		</p><p>
 			Lombok can add <code>@javax.annotation.Generated</code> annotations to all generated nodes where possible. You can enable this with:
-			<div class="snippet example">
-				<code>lombok.addJavaxGeneratedAnnotation = true</code>
-			</div>
+			<ol class="snippet example oneliner">
+				<li><code>lombok.addJavaxGeneratedAnnotation = true</code></li>
+			</ol>
 			We advise against this; JDK9 breaks this annotation, and it's unlikely to ever get fixed.<br />
 			<em>NB:</em> Until Lombok v1.16.20, this setting defaulted to <code>true</code>.
 		</p><p>
 			Lombok can be configured to add <code>@lombok.Generated</code> annotations to all generated nodes where possible; useful for JaCoCo (which has built in support),
 			or other style checkers and code coverage tools:
-			<div class="snippet example">
-				<code>lombok.addLombokGeneratedAnnotation = true</code>
-			</div>
+			<ol class="snippet example oneliner">
+				<li><code>lombok.addLombokGeneratedAnnotation = true</code></li>
+			</ol>
 		</p><p>
 			Lombok can add the <code>@SuppressFBWarnings</code> annotation which is useful if you want to run <a href="http://findbugs.sourceforge.net/">FindBugs</a> on your class files. To enable this feature, make sure findbugs is on the classpath when you compile, and add the following config key:
-			<div class="snippet example">
-				<code>lombok.extern.findbugs.addSuppressFBWarnings = true</code>
-			</div>
+			<ol class="snippet example oneliner">
+				<li><code>lombok.extern.findbugs.addSuppressFBWarnings = true</code></li>
+			</ol>
 		</p>
 	</@f.featureSection>
 
@@ -105,10 +105,10 @@
 
 		<p>
 			These config keys can make lombok affect source files even if they have 0 lombok annotations in them.<br />
-			<div class="snippet example">
-				<code>lombok.fieldDefaults.defaultPrivate = true</code><br />
-				<code>lombok.fieldDefaults.defaultFinal = true</code>
-			</div>
+			<ol class="snippet example">
+				<li><code>lombok.fieldDefaults.defaultPrivate = true</code></li>
+				<li><code>lombok.fieldDefaults.defaultFinal = true</code></li>
+			</ol>
 			Turning either of these options on means lombok will make <em>every</em> field in <em>every</em> source file final and/or private unless it has an explicit access modifier or annotation to suppress this. <a href="experimental/FieldDefaults">See the <code>@FieldDefaults</code> documentation for more</a>.
 		</p>
 	</@f.featureSection>
@@ -117,19 +117,19 @@
 		<@f.main.h3 title="Importing the configuration from a different file" />
 		<p>
 			At the top of a configuration file it is possible to import other configuration files. Imported files don't have to be called <code>lombok.config</code> and can have any file extension (or even none).<br />
-			<div class="snippet example">
-				<code>import ../configuration/model.config</code>
-			</div>
+			<ol class="snippet example">
+				<li><code>import ../configuration/model.config</code></li>
+			</ol>
 			The location of an imported file is resolved relative to the file that imports it.
 		</p>
 		<p>
 			For shared projects, it makes sense to always use relative paths. For individuals, it is also possible to use absolute paths.<br />
-			<div class="snippet example">
-				<code># Linux</code><br />
-				<code>import /etc/lombok/model.config</code><br />
-				<code># Windows</code><br />
-				<code>import d:/lombok/model.config</code>
-			</div>
+			<ol class="snippet example">
+				<li><code># Linux</code></li>
+				<li><code>import /etc/lombok/model.config</code></li>
+				<li><code># Windows</code></li>
+				<li><code>import d:/lombok/model.config</code></li>
+			</ol>
 		</p>
 		<p>
 			Configuration files can import multiple configuration files as long as they are specified before any configuration key.
@@ -142,23 +142,23 @@
 		</p>
 		<p>
 			It is also possible to import files from <code>.jar</code> and <code>.zip</code> files.<br />
-			<div class="snippet example">
-				<code># Use 'lombok.config' from the root of the archive.</code><br />
-				<code>import ../deps/lombok-config.jar</code><br />
-				<code># Use a given file in the archive.</code><br />
-				<code>import ../deps/lombok-config.zip!base/model.config</code>
-			</div>
+			<ol class="snippet example">
+				<li><code># Use 'lombok.config' from the root of the archive.</code></li>
+				<li><code>import ../deps/lombok-config.jar</code></li>
+				<li><code># Use a given file in the archive.</code></li>
+				<li><code>import ../deps/lombok-config.zip!base/model.config</code></li>
+			</ol>
 			Configuration files inside archives can import other configuration files, provided that they are in the same archive.
 		</p>
 		<p>
 			When importing files, it is possible to use environment variables.<br />
-			<div class="snippet example">
-				<code># Environment variables are names surrounded by angle brackets (&lt;, &gt;).</code><br />
-				<code># They are replaced by System.getenv(name), if present.</code><br />
-				<code>import &lt;JAVA_PROJECTS&gt;/shared.config</code><br />
-				<code># A tilde (~) at the start gets replaced by System.getProperty("user.home", "~").</code><br />
-				<code>import ~/my.config</code>
-			</div>
+			<ol class="snippet example">
+				<li><code># Environment variables are names surrounded by angle brackets (&lt;, &gt;).</code></li>
+				<li><code># They are replaced by System.getenv(name), if present.</code></li>
+				<li><code>import &lt;JAVA_PROJECTS&gt;/shared.config</code></li>
+				<li><code># A tilde (~) at the start gets replaced by System.getProperty("user.home", "~").</code></li>
+				<li><code>import ~/my.config</code></li>
+			</ol>
 			As with absolute paths, this is more useful for individuals than for shared projects.
 		</p>
 	</@f.featureSection>