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 esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM 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.
<div class="container">
<nav id="navbar" class="navbar">
<header>
<h1 class="navbar__title">Ruby</h1>
</header>
<ul class="navbar__list">
<li class="navbar__li"><a href="#History" class="nav-link navbar__link">History</a></li>
<li class="navbar__li"><a href="#Philosophy" class="nav-link navbar__link">Philosophy</a></li>
<li class="navbar__li"><a href="#Features" class="nav-link navbar__link">Features</a></li>
<li class="navbar__li"><a href="#Semantics" class="nav-link navbar__link">Semantics</a></li>
<li class="navbar__li"><a href="#Syntax" class="nav-link navbar__link">Syntax</a></li>
<li class="navbar__li"><a href="#Examples" class="nav-link navbar__link">Examples</a></li>
</ul>
</nav>
<main id="main-doc" class="main">
<!-- one section -->
<section class="main-section" id="History">
<header>
<h2>History</h2>
</header>
<h3>The name "Ruby"</h3>
<p>The name "Ruby" originated during an online chat session between Matsumoto and Keiju Ishitsuka on February 24, 1993, before any code had been written for the language. Initially two names were proposed: "Coral" and "Ruby". Matsumoto chose the latter in a later e-mail to Ishitsuka. Matsumoto later noted a factor in choosing the name "Ruby" – it was the birthstone of one of his colleagues.</p>
<h3>First Publication</h3>
<p>The first public release of Ruby 0.95 was announced on Japanese domestic newsgroups on December 21, 1995. Subsequently, three more versions of Ruby were released in two days. The release coincided with the launch of the Japanese-language ruby-list mailing list, which was the first mailing list for the new language.</p>
</section>
<!-- two section -->
<section class="main-section" id="Philosophy">
<header>
<h2>Philosophy</h2>
</header>
<p>Matsumoto has said that Ruby is designed for programmer productivity and fun, following the principles of good user interface design. At a Google Tech Talk in 2008 Matsumoto further stated, "I hope to see Ruby help every programmer in the world to be productive, and to enjoy programming, and to be happy. That is the primary purpose of Ruby language."He stresses that systems design needs to emphasize human, rather than computer, needs:</p>
</section>
<!-- three section -->
<section class="main-section" id="Features">
<header>
<h2>Features</h2>
</header>
<ul>
<li>Thoroughly object-oriented with inheritance, mixins and metaclasses</li>
<li>Dynamic typing and duck typing</li>
<li>Everything is an expression (even statements) and everything is executed imperatively (even declarations)</li>
<li>Succinct and flexible syntax that minimizes syntactic noise and serves as a foundation for domain-specific languages</li>
<li>Dynamic reflection and alteration of objects to facilitate metaprogramming</li>
<li>Lexical closures, iterators and generators, with a block syntax</li>
<li>Literal notation for arrays, hashes, regular expressions and symbols</li>
<li>Embedding code in strings (interpolation)</li>
<li>Default arguments</li>
<li>Four levels of variable scope (global, class, instance, and local) denoted by sigils or the lack thereof</li>
<li>Garbage collection</li>
<li>First-class continuations</li>
<li>Exception handling</li>
</ul>
</section>
<!-- four section -->
<section class="main-section" id="Semantics">
<header>
<h2>Semantics</h2>
</header>
<p>Ruby is object-oriented: every value is an object, including classes and instances of types that many other languages designate as primitives (such as integers, booleans, and "null"). Variables always hold references to objects. Every function is a method and methods are always called on an object. Methods defined at the top level scope become methods of the Object class. Since this class is an ancestor of every other class, such methods can be called on any object. They are also visible in all scopes, effectively serving as "global" procedures. Ruby supports inheritance with dynamic dispatch, mixins and singleton methods (belonging to, and defined for, a single instance rather than being defined on the class). Though Ruby does not support multiple inheritance, classes can import modules as mixins.</p>
<p>Ruby has been described as a multi-paradigm programming language: it allows procedural programming (defining functions/variables outside classes makes them part of the root, 'self' Object), with object orientation (everything is an object) or functional programming (it has anonymous functions, closures, and continuations; statements all have values, and functions return the last evaluation). It has support for introspection, reflection and metaprogramming, as well as support for interpreter-based threads. Ruby features dynamic typing, and supports parametric polymorphism.</p>
</section>
<!-- five section -->
<section class="main-section" id="Syntax">
<header>
<h2>Syntax</h2>
</header>
<p>The syntax of Ruby is broadly similar to that of Perl and Python. Class and method definitions are signaled by keywords, whereas code blocks can be both defined by keywords or braces. In contrast to Perl, variables are not obligatorily prefixed with a sigil. When used, the sigil changes the semantics of scope of the variable. For practical purposes there is no distinction between expressions and statements. Line breaks are significant and taken as the end of a statement; a semicolon may be equivalently used. Unlike Python, indentation is not significan</p>
</section>
<!-- six section -->
<section class="main-section" id="Examples">
<header>
<h2>Examples</h2>
</header>
<p>The following examples can be run in a Ruby shell such as Interactive Ruby Shell, or saved in a file and run from the command line by typing ruby filename.</p>
<p>Classic Hello world example:</p>
<code>
puts 'Hello World!'
</code>
<h3>Strings</h3>
<p>There are a variety of ways to define strings in Ruby.</p>
<p>The following assignments are equivalent:</p>
<code>
a = "\nThis is a double-quoted string\n"
</br>
a = %Q{\nThis is a double-quoted string\n}
</br>
a = %{\nThis is a double-quoted string\n}
</br>
a = %/\nThis is a double-quoted string\n/
</code>
<h3>Collections</h3>
<p>Constructing and using an array:</p>
<code>
a = [1, 'hi', 3.14, 1, 2, [4, 5]]
</br>
a[2] # => 3.14
</br>
a.[](2) # => 3.14
</br>
a.reverse # => [[4, 5], 2, 1, 3.14, 'hi', 1]
</code>
<h3>Control structures</h3>
<p>If statement:</p>
<code>
# Generate a random number and print whether it's even or odd.
</br>
if rand(100).even?
</br>
puts "It's even"
</br>
else
</br>
puts "It's odd"
</br>
end
</code>
<h3>Block and iterators</h3>
<p>The two syntaxes for creating a code block:</p>
<code>
{ puts 'Hello, World!' } # note the braces
</br>
# or:
</br>
do
</br>
puts 'Hello, World!'
</br>
end
</code>
</section>
</main>
</div>
body {
margin: 0;
background-color: #bb1e10;
}
.container {
max-width: 1200px;
font-family: 'Rubik', sans-serif;
}
.navbar {
position: fixed;
top: 0px;
left: 0px;
width: 200px;
background-color: #bb1e10;
color: #fff;
height: 100%;
}
.navbar__title {
text-align: center;
font-size: 2em;
}
.navbar__list {
list-style: none;
text-align: center;
padding-left: 0px;
}
.navbar__li {
margin: 20px 0px;
}
.navbar__link {
text-decoration: none;
color: #fff;
}
.main {
padding: 20px;
background-color: #666666;
color: #fff;
margin-left: 200px;
width: auto;
}
.main p {
line-height: 2;
}
/* media queries */
@media (max-width: 850px) {
.navbar {
position: static;
width: 100%;
}
.navbar__list {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.navbar__link {
}
.main {
margin-left: auto;
}
}
@media (max-width: 550px) {
.navbar__list {
display: flex;
flex-direction: column;
}
.navbar__li {
margin: 10px 0;
}
}
Also see: Tab Triggers