HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<p><a href="#bottom" id="top"><strong>Click here</strong> to journey to the bottom of the page…</a></p>
<section>
<h1>A Journey Into The Interior of the Earth</h1>
<h2><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jules-verne-autograph.svg" alt="Jules Verne"></h2>
<h3><span>Chapter II</span>A Mystery To Be Solved At Any Price</h3>
<p>That study of his was a museum, and nothing else. Specimens of everything known in mineralogy lay there in their places in perfect order, and correctly named, divided into inflammable, metallic, and lithoid minerals.</p>
<p>How well I knew all these bits of science! Many a time, instead of enjoying the company of lads of my own age, I had preferred dusting these graphites, anthracites, coals, lignites, and peats! And there were bitumens, resins, organic salts, to be protected from the least grain of dust; and metals, from iron to gold, metals whose current value altogether disappeared in the presence of the republican equality of scientific specimens; and stones too, enough to rebuild entirely the house in Königstrasse, even with a handsome additional room, which would have suited me admirably.</p>
<p>But on entering this study now I thought of none of all these wonders; my uncle alone filled my thoughts. He had thrown himself into a velvet easy-chair, and was grasping between his hands a book over which he bent, pondering with intense admiration.</p>
<p>“Here’s a remarkable book! What a wonderful book!” he was exclaiming.</p>
<p>These ejaculations brought to my mind the fact that my uncle was liable to occasional fits of bibliomania; but no old book had any value in his eyes unless it had the virtue of being nowhere else to be found, or, at any rate, of being illegible.</p>
<p>“Well, now; don’t you see it yet? Why I have got a priceless treasure, that I found his morning, in rummaging in old Hevelius’s shop, the Jew.”</p>
<p>“Magnificent!” I replied, with a good imitation of enthusiasm.</p>
<p>What was the good of all this fuss about an old quarto, bound in rough calf, a yellow, faded volume, with a ragged seal depending from it?</p>
<p>But for all that there was no lull yet in the admiring exclamations of the Professor.</p>
<p>“See,” he went on, both asking the questions and supplying the answers. “Isn’t it a beauty? Yes; splendid! Did you ever see such a binding? Doesn’t the book open easily? Yes; it stops open anywhere. But does it shut equally well? Yes; for the binding and the leaves are flush, all in a straight line, and no gaps or openings anywhere. And look at its back, after seven hundred years. Why, Bozerian, Closs, or Purgold might have been proud of such a binding!”</p>
<p>While rapidly making these comments my uncle kept opening and shutting the old tome. I really could do no less than ask a question about its contents, although I did not feel the slightest interest.</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/Édouard_Riou_Illustration.png" id="professor" alt="A black-and-white painting of a haughty man smoking a pipe in a 19th century library">
<p>“And what is the title of this marvellous work?” I asked with an affected eagerness which he must have been very blind not to see through.</p>
<p>“This work,” replied my uncle, firing up with renewed enthusiasm,
“this work is the Heims Kringla of Snorre Turlleson, the most famous
Icelandic author of the twelfth century! It is the chronicle of the
Norwegian princes who ruled in Iceland.”</p>
<p>“Indeed;” I cried, keeping up wonderfully, “of course it is a German translation?”</p>
<p>“What!” sharply replied the Professor, “a translation! What should I do with a translation? This is the Icelandic original, in the magnificent idiomatic vernacular, which is both rich and simple, and admits of an infinite variety of grammatical combinations and verbal modifications.”</p>
<p>“Like German.” I happily ventured.</p>
<p>“Yes,” replied my uncle, shrugging his shoulders; “but, in addition to all this, the Icelandic has three numbers like the Greek, and irregular declensions of nouns proper like the Latin.”</p>
<p>“Ah!” said I, a little moved out of my indifference; “and is the type good?”</p>
<p>“Type! What do you mean by talking of type, wretched Axel? Type! Do you take it for a printed book, you ignorant fool? It is a manuscript, a Runic manuscript.”</p>
<p>“Runic?”</p>
<p>“Yes. Do you want me to explain what that is?”</p>
<p>“Of course not,” I replied in the tone of an injured man. But my uncle persevered, and told me, against my will, of many things I cared nothing about.</p>
<p>“Runic characters were in use in Iceland in former ages. They were invented, it is said, by Odin himself. Look there, and wonder, impious young man, and admire these letters, the invention of the Scandinavian god!”</p>
<p>Well, well! not knowing what to say, I was going to prostrate myself before this wonderful book, a way of answering equally pleasing to gods and kings, and which has the advantage of never giving them any embarrassment, when a little incident happened to divert conversation into another channel.</p>
<p>This was the appearance of a dirty slip of parchment, which slipped out of the volume and fell upon the floor.</p>
<p>My uncle pounced upon this shred with incredible avidity. An old document, enclosed an immemorial time within the folds of this old book, had for him an immeasurable value.</p>
<p>“What’s this?” he cried.</p>
<p>And he laid out upon the table a piece of parchment, five inches by three, and along which were traced certain mysterious characters.</p>
<p>Here is the exact facsimile. I think it important to let these strange signs be publicly known, for they were the means of drawing on Professor Liedenbrock and his nephew to undertake the most wonderful expedition of the nineteenth century.</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/cryptogramme-runes.png" alt="Diagram of a series of runes" id="runes">
</section>
<p><a href="#top" id="bottom"><strong>Click here</strong> to jump back up to the top…</a></p>
@font-face {
font-family: 'IM Fell French Canon Pro';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/im-fell-french-canon-pro.woff2') format('woff2'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/im-fell-french-canon-pro.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: IM Fell French Canon Pro;
scroll-behavior: smooth;
margin: 3rem;
> p:first-of-type, >p:last-of-type {
font-style: italic;
font-size: 1.2rem;
a {
text-decoration: none;
color: #222;
font-weight: bolder;
}
}
>p:last-of-type {
text-align: right;
}
}
section {
max-width: 40rem;
line-height: 1.4;
margin: 0 auto;
h1 {
font-size: 3rem;
}
h2 {
text-align: center;
margin: 0;
img {
width: 40%;
min-width: 200px;
}
}
h3 {
font-size: 2.3rem;
text-align: center;
span {
display: block;
&:after {
content: ":";
}
}
}
p {
font-size: 1.4rem;
}
img#runes {
display: block;
max-width: 100%;
}
#professor {
float: right;
margin-left: 3rem;
width: 17.8rem;
@media all and (max-width: 600px) {
float: none;
display: block;
width: 75%;
margin: 0 auto;
}
}
}
var anchorLink = document.querySelector("a[href='#bottom']"),
target = document.getElementById("bottom");
anchorLink.addEventListener("click", function(e) {
if (window.scrollTo) {
e.preventDefault();
window.scrollTo({"behavior": "smooth", "top": target.offsetTop});
}
})
Also see: Tab Triggers