Pen Settings

HTML

About HTML Preprocessors

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.

Learn more · Versions

Adding Classes

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.

About the <head>

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.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

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.

Vendor Prefixing

About Vendor Prefixing

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).

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.

Powered by Algolia
About External Resources

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.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

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.

Learn more

+ 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.

Powered by Algolia
About Packages

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.

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 

              
                <nav class="toc">
    <ul>
        <li>
            <a href="#html">html</a>
        </li>
        <li>
            <a href="#tags">tags</a>
        </li>
        <li>
            <a href="#html5">html5</a>
        </li>
        <li>
            <a href="#readMore">read more</a>
        </li>
    </ul>
</nav>
<div class="contents">
    <section id="html">
    <h1> HTML (wikipedia)</h1>
    <p>HyperText Markup Language (HTML) is a markup language for creating webpages. Webpages are usually viewed in a web
        browser. They can include writing, links, pictures, and even sound and video. HTML is used to mark and describe each
        of these kinds of content so the web browser can show them correctly.</br>
        HTML can also be used to add meta information to a webpage. Meta information is information about the web page. For example,
        the name of the person who made it. Meta information is not usually shown by web browsers.</br>
        Cascading Style Sheets (CSS) and JavaScript can be included in HTML code. CSS is used to change how a webpage looks. JavaScript
        is used to add features to webpages and make them more interactive.</br>
        HTML was made by the World Wide Web Consortium (W3C). There are many versions of HTML. The current standard is HTML 4.01.
        So, it is the version the W3C recommends. A newer version, called HTML5, will become standard within the next few
        years. The W3C also develops XHTML. This is another markup language which is very similar to HTML, but more strict.
    </p>
</section>

    <section id="tags">
        <h1> tags </h1>
        <p>HTML uses special bits of programming language called "tags" to let the browser know how a webpage should look. The
            tags usually come in pairs: an opening tag to tell the browser when to start doing something, and an ending tag
            to tell the browser when to stop doing something. There are many different kinds of tags, and each one has a
            different purpose.HTML uses special bits of programming language called "tags" to let the browser know how a
            webpage should look. The tags usually come in pairs: an opening tag to tell the browser when to start doing something,
            and an ending tag to tell the browser when to stop doing something. There are many different kinds of tags, and
            each one has a different purpose.</br>
            Opening tags have a keyword, such as "p," surrounded by angle brackets (&lt and &gt). For example, the tag &ltp&gt tells
            the browser to start a new paragraph. Ending tags look almost exactly the same, only they have a forward slash
            (/) added just before the keyword. For example, the tag &lt/p&gt tells the browser to end a paragraph. A small
            number of tags, like &ltbr&gt, &ltimg&gt and &lthr&gt, can be used without an ending tag.</br>
            Some tags only work in certain browsers. For example, the &ltmarquee&gt tag, which is used to make a bit of writing slide
            across the page, only works in the Internet Explorer and Mozilla Firefox browsers. Other browsers simply ignore
            this tag and display the writing normally. Many web page creators avoid using these "non-standard" tags because
            they want their pages to look the same with all browsers.</br>
            Opening tags have a keyword, such as "p," surrounded by angle brackets (&lt and &gt). For example, the tag &ltp&gt tells
            the browser to start a new paragraph. Ending tags look almost exactly the same, only they have a forward slash
            (/) added just before the keyword. For example, the tag &lt/p&gt tells the browser to end a paragraph. A small
            number of tags, like &ltbr&gt, &ltimg&gt and &lthr&gt, can be used without an ending tag.</br>
            Some tags only work in certain browsers. For example, the &ltmarquee&gt tag, which is used to make a bit of writing slide
            across the page, only works in the Internet Explorer and Mozilla Firefox browsers. Other browsers simply ignore
            this tag and display the writing normally. Many web page creators avoid using these "non-standard" tags because
            they want their pages to look the same with all browsers.</p>
    </section>

    <section id="html5">
        <h1> HTML5 </h1>
        <p>The W3C is making a new version of HTML, called HTML5, with more features and better support for things like online
            video. HTML5 is expected to become the standard version of HTML within the next few years.</br>
            Some of the new features in HTML5 are:</br>
            <ul>
                <li>The &ltcanvas&gt tag which can be used with JavaScript to draw 2D pictures and animations.</li>
                <li>A &ltvideo&gt tag for adding videos to a webpage.</li>
                <li>A &ltaudio&gt tag for adding audio, like music or sound effects, to a webpage.</li>
            </ul>
            Tags for marking common kinds of content, including: &ltarticle&gt, &ltfooter&gt, &ltheader&gt, &ltnav&gt, &ltprogress&gt,
            &ltsection&gt, &ltsummary&gt, &lttime&gt</br>
            In addition, some features of HTML4 have been left out of HTML5. For example, the &ltfont&gt tag, which is used to change
            how text looks on a page, is not available in HTML5. The W3C recommends doing this with CSS instead.</br>
            One of the aims of HTML5 is to remove the need to use third-party software like Adobe Flash, because it is often slow on
            mobile devices like phones and can be used to infect your computer with viruses. Another aim is to reduce the
            amount of program code (JavaScript) running in each webpage, thus making the web faster.</br>
            Currently, no browsers completely support all of HTML5's new features. However, some of the features are supported by Mozilla
            Firefox, Google Chrome and Apple Safari.</p>
    </section>

    <section id="readMore">
        <h1> read more </h1>
        <a href="https://simple.wikipedia.org/wiki/HTML" target="_blank">HTML wikipedia </a>
    </section>
</div>
!

CSS 

              
                html {
  scroll-behavior: smooth;
}

.highlight {
  font-weight: bolder;
  color: #111;
  display: list-item;
  list-style-type: disc;
}

.toc {
  position: fixed;
  left: 1.5em;
  top: 3em;
  padding: 1em;
  width: 7em;
  line-height: 2;
  font-family: sans-serif;
}

.toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc li a {
  color: #aaa;
  text-decoration: none;
}

.contents {
  padding: 1em;
  max-width: 600px;
  font-size: 1.2em;
  font-family: sans-serif;
  margin-left: 7.5em;
}

@media screen and (max-width: 1200px) {
  body {
    font-size: 14px;
  }
}
!

JS 

              
                
// array of the links in the toc (table of content) block
var toc;
// array of content (links are refers to the content)
var content = [];

// call prepare function for while page is loaded complete
document.addEventListener('DOMContentLoaded', function () {
    prepare();
    sync();
}, false);

/**
 * this function get all toc (table of content) links and content 
 * and save theme
 */
function prepare() {
    // get all toc (table of content) links
    toc = document.querySelectorAll('.toc a');
    // get content so that link refer to it
    toc.forEach(function (link) {
        var id = link.getAttribute("href");
        var element = document.querySelector(id);
        content.push(element);
    });
    // sync toc (table of content) whit part of content that is 
    // visible into viewport while user scroll
    window.addEventListener("scroll", sync, false);
}


/**
 * this function check if element is visible in viewport 
 * 
 * @argument {String} element which we need to check it 
 * @returns true if element is visible in viewport else return false 
 */
function isElementInViewport(element) {
    // get element position
    var rect = element.getBoundingClientRect();

    // return true if a partial of the element is visible
    return (rect.bottom >= 0 &&
        rect.top <= (window.innerHeight || document.documentElement.clientHeight));

    // for while we need check if all off the element is visible in viewport
    // return (rect.top >= 0 &&
    //     rect.bottom <= (window.innerHeight || document.documentElement.clientHeight));
}

/**
 * this function highlight toc (table of content) links which is visible in viewport
 */
function sync() {
    // check all content 
    for (var i = 0; i < content.length; i++) {
        // if content is visible if viewport highlight it 
        // else remove highlight from it
        if (isElementInViewport(content[i])) {
            toc[i].classList.add('highlight');
        } else {
            toc[i].classList.remove('highlight');
        }
    }
}
!
999px

Console