Styling changes & docs update
This commit is contained in:
Lea Verou
parent
8f6e4afe84
commit
96da9fbc19
37
index.html
37
index.html
|
|
@ -28,7 +28,7 @@
|
|||
Language classes are inherited so you can only define the language once for multiple code snippets.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Incredibly lightweight</strong>
|
||||
<strong>Light as a feather</strong>
|
||||
The core is 1.5KB minified & gzipped. Languages add 0.3-0.5KB each, themes are around 1KB.
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -36,8 +36,9 @@
|
|||
Supports parallelism with Web Workers, if available.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Very extensible</strong>
|
||||
Its plugin architecture makes it easy to add new features. Very easy to define new languages.
|
||||
<strong>Extensible</strong>
|
||||
Define new languages or extend existing ones.
|
||||
Add new features thanks to Prism’s plugin architecture.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Easy styling</strong>
|
||||
|
|
@ -126,11 +127,9 @@
|
|||
<section id="plugins">
|
||||
<h1>Plugins</h1>
|
||||
<p>Plugins are additional scripts (and CSS code) that extend Prism’s functionality. Many of the following plugins are official, but are released as plugins to keep the Prism Core small for those who don’t need the extra functionality.</p>
|
||||
<ul>
|
||||
<li><a href="plugins/line-highlight/">Line highlight: Highlight specific lines and line ranges</a></li>
|
||||
<li><a href="plugins/show-invisibles/">Show invisibles: Show tabs and line breaks</a></li>
|
||||
</ul>
|
||||
<ul></ul>
|
||||
|
||||
<p>No assembly required to use them. Just select them in the <a href="download.html">download</a> page.</p>
|
||||
<p>It’s very easy to <a href="extending.html#writing-plugins">write your own Prism plugins</a>. Did you write a plugin for Prism that you want added to this list? <a href="https://github.com/LeaVerou/prism" target="_blank">Send a pull request</a>!</p>
|
||||
</section>
|
||||
|
||||
|
|
@ -149,6 +148,30 @@
|
|||
<script src="prism.js" data-default-language="markup"></script>
|
||||
<script src="utopia.js"></script>
|
||||
<script src="code.js"></script>
|
||||
<script>
|
||||
(function(){
|
||||
var ul = $('#plugins ul');
|
||||
|
||||
for (var id in components.plugins) {
|
||||
if (id == 'meta') {
|
||||
continue;
|
||||
}
|
||||
|
||||
var plugin = components.plugins[id];
|
||||
|
||||
$u.element.create('li', {
|
||||
contents: {
|
||||
tag: 'a',
|
||||
prop: {
|
||||
href: components.plugins.meta.path.replace(/\{id}/g, id)
|
||||
},
|
||||
contents: plugin.title || plugin
|
||||
},
|
||||
inside: ul
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="simple">
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="simple">
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="simple">
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
76
style.css
76
style.css
|
|
@ -1,4 +1,5 @@
|
|||
@import url(http://fonts.googleapis.com/css?family=Questrial);
|
||||
@import url(http://fonts.googleapis.com/css?family=Arvo);
|
||||
|
||||
@font-face {
|
||||
src: url(http://lea.verou.me/logo.otf);
|
||||
|
|
@ -11,8 +12,9 @@
|
|||
|
||||
section h1,
|
||||
#features li strong,
|
||||
header h2 {
|
||||
font: italic 100% Baskerville, Palatino Linotype, Georgia, serif;
|
||||
header h2,
|
||||
footer p {
|
||||
font: 100% Rockwell, Arvo, serif;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -36,7 +38,7 @@ a {
|
|||
}
|
||||
|
||||
section h1 {
|
||||
font-size: 300%;
|
||||
font-size: 250%;
|
||||
}
|
||||
|
||||
section section h1 {
|
||||
|
|
@ -180,13 +182,17 @@ header {
|
|||
}
|
||||
|
||||
#features li {
|
||||
margin: 0 4em 2em 0;
|
||||
margin: 0 0 2em 0;
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
width: 27em;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#features li:nth-child(odd) {
|
||||
margin-right: 5em;
|
||||
}
|
||||
|
||||
#features li:before {
|
||||
content: '✓';
|
||||
float: left;
|
||||
|
|
@ -199,37 +205,8 @@ header {
|
|||
#features li strong {
|
||||
display: block;
|
||||
margin-bottom: .1em;
|
||||
font-size: 230%;
|
||||
font-size: 200%;
|
||||
}
|
||||
|
||||
.download-button {
|
||||
display: block;
|
||||
padding: .2em .8em .1em;
|
||||
border: 1px solid rgba(0,0,0,0.5);
|
||||
border-radius: 10px;
|
||||
background: #39a1cf;
|
||||
box-shadow: 0 2px 10px black,
|
||||
inset 0 1px hsla(0,0%,100%,.3),
|
||||
inset 0 .4em hsla(0,0%,100%,.2),
|
||||
inset 0 10px 20px hsla(0,0%,100%,.25),
|
||||
inset 0 -15px 30px rgba(0,0,0,0.3);
|
||||
color: white;
|
||||
text-shadow: 0 -1px 2px black;
|
||||
text-align: center;
|
||||
font-size: 250%;
|
||||
line-height: 1.5;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
hyphens: manual;
|
||||
}
|
||||
|
||||
.download-button:hover {
|
||||
background-color: #7fab14;
|
||||
}
|
||||
|
||||
.download-button:active {
|
||||
box-shadow: inset 0 2px 8px rgba(0,0,0,.8);
|
||||
}
|
||||
|
||||
header .download-button {
|
||||
float: right;
|
||||
|
|
@ -240,7 +217,7 @@ header {
|
|||
position: relative;
|
||||
z-index: 1;
|
||||
float: right;
|
||||
margin-right: -4em;
|
||||
margin-right: -1em;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .2em;
|
||||
|
|
@ -310,6 +287,35 @@ footer {
|
|||
column-count: 3;
|
||||
}
|
||||
|
||||
.download-button {
|
||||
display: block;
|
||||
padding: .2em .8em .1em;
|
||||
border: 1px solid rgba(0,0,0,0.5);
|
||||
border-radius: 10px;
|
||||
background: #39a1cf;
|
||||
box-shadow: 0 2px 10px black,
|
||||
inset 0 1px hsla(0,0%,100%,.3),
|
||||
inset 0 .4em hsla(0,0%,100%,.2),
|
||||
inset 0 10px 20px hsla(0,0%,100%,.25),
|
||||
inset 0 -15px 30px rgba(0,0,0,0.3);
|
||||
color: white;
|
||||
text-shadow: 0 -1px 2px black;
|
||||
text-align: center;
|
||||
font-size: 250%;
|
||||
line-height: 1.5;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
hyphens: manual;
|
||||
}
|
||||
|
||||
.download-button:hover {
|
||||
background-color: #7fab14;
|
||||
}
|
||||
|
||||
.download-button:active {
|
||||
box-shadow: inset 0 2px 8px rgba(0,0,0,.8);
|
||||
}
|
||||
|
||||
#toc {
|
||||
position: fixed;
|
||||
left: 3em;
|
||||
|
|
|
|||
|
|
@ -5,4 +5,7 @@
|
|||
<p>
|
||||
Prism is a new lightweight, extensible syntax highlighter, built with modern web standards in mind.
|
||||
It’s a spin-off from <a href="http://dabblet.com">Dabblet</a> and is tested there daily by thousands.
|
||||
</p>
|
||||
</p>
|
||||
|
||||
<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
|
||||
<script src="http://www.google-analytics.com/ga.js" async></script>
|
||||
|
|
@ -4,5 +4,5 @@
|
|||
|
||||
<p>
|
||||
Prism is a new lightweight, extensible syntax highlighter, built with modern web standards in mind.
|
||||
It’s a spin-off from <a href="http://dabblet.com">Dabblet</a> and is tested there daily by thousands of users.
|
||||
It’s a spin-off from <a href="http://dabblet.com">Dabblet</a> and is tested there daily by thousands.
|
||||
</p>
|
||||
Loading…
Reference in New Issue