Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

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.

+ add another resource

Packages

Add Packages

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.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>
              
            
!

CSS

              
                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;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console