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.
<nav id="navbar">
<header>Python Documentation</header>
<ul>
<li><a class="nav-link" href="#Introduction">Introduction</a></li>
<li>
<a class="nav-link" href="#Design_philosophy">Design philosophy</a>
</li>
<li>
<a class="nav-link" href="#Indentation">Indentation</a>
</li>
<li>
<a class="nav-link" href="#Statements_and_controlflow">Statements and controlflow</a>
</li>
<li>
<a class="nav-link" href="#Hello_world">Hello world</a>
</li>
<li>
<a class="nav-link" href="#Methods">Methods</a>
</li>
<li>
<a class="nav-link" href="#Typing">Typing</a>
</li>
<li>
<a class="nav-link" href="#Libraries">Libraries</a>
</li>
<li>
<a class="nav-link" href="#Development">Development</a>
</li>
<li>
<a class="nav-link" href="#Development_environments">Development Environments</a>
</li>
<li>
<a class="nav-link" href="#Popularity">Popularity</a>
</li>
<li>
<a class="nav-link" href="#Reference">Reference</a>
</li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<article>
<p>
Python is a high level general-purpose programming language. It uses a multi-paradigm approach, meaning it supports procedural, object-oriented, and some functional programming constructs.
</p>
<p>
It was created by Guido van Rossum as a successor to another language (called ABC) between 1985 and 1990, and is currently used on a large array of domains like web development, desktop applications, data science, DevOps, and automation/productivity.
</p>
<p>
Python is developed under an OSI-approved open source license, making it freely usable and distributable, even for commercial use. Python's license is administered by the Python Software Foundation
</p>
</article>
</section>
<section class="main-section" id="Design_philosophy">
<header>Design philosophy</header>
<article>
<p>
The language's core philosophy is summarized in the document The Zen of Python (PEP 20), which includes aphorisms such as:
</p>
<ul>
<li>Beautiful is better than ugly.</li>
<li>Explicit is better than implicit.</li>
<li>Simple is better than complex.</li>
<li>Complex is better than complicated.</li>
<li>Readability counts.</li>
</ul>
</article>
</section>
<section class="main-section" id="Indentation">
<header>Indentation</header>
<article>
<p>
Python uses whitespace indentation, rather than curly brackets or keywords, to delimit blocks. An increase in indentation comes after certain statements; a decrease in indentation signifies the end of the current block. Thus, the program's visual structure accurately represents the program's semantic structure. This feature is sometimes termed the off-side rule, which some other languages share, but in most languages indentation does not have any semantic meaning. The recommended indent size is four spaces.
</p>
</article>
</section>
<section class="main-section" id="Statements_and_controlflow">
<header>Statements and controlflow</header>
<article>
<p>
Python's statements include (among others):
<ul>
<li>The assignment statement, using a single equals sign <code>=</code>.</li>
<li>The <code>for</code> statement, which iterates over an iterable object, capturing each element to a local variable for use by the attached block.</li>
<li>The <code>if</code> statement, which conditionally executes a block of code, along with <code>else</code> and <code>elif</code> (a contraction of else-if).</li>
<li>The <code>while</code> statement, which executes a block of code as long as its condition is true.</li>
<li>The <code>try</code> statement, which allows exceptions raised in its attached code block to be caught and handled by <code>except</code> clauses; it also ensures that clean-up code in a <code>finally</code> block will always be run regardless of how the block exits.</li>
<li>The <code>raise</code> statement, used to raise a specified exception or re-raise a caught exception.</li>
<li>The <code>class</code> statement, which executes a block of code and attaches its local namespace to a class, for use in object-oriented programming.</li>
<li>The <code>def</code> statement, which defines a function or method.</li>
<li>The <code>with</code> statement, which encloses a code block within a context manager (for example, acquiring a lock before the block of code is run and releasing the lock afterwards, or opening a file and then closing it), allowing resource-acquisition-is-initialization (RAII)-like behavior and replaces a common try/finally idiom.</li>
<li>The <code>break</code> statement, exits from a loop.</li>
<li>The <code>continue</code> statement, skips this iteration and continues with the next item.</li>
<li>The <code>del</code> statement, removes a variable, which means the reference from the name to the value is deleted and trying to use that variable will cause an error. A deleted variable can be reassigned.</li>
<li>The <code>pass</code> statement, which serves as a NOP. It is syntactically needed to create an empty code block.</li>
<li>The <code>assert</code> statement, used during debugging to check for conditions that should apply.</li>
<li>The <code>yield</code> statement, which returns a value from a generator function and <code>yield</code> is also an operator. This form is used to implement coroutines.</li>
<li>The <code>return</code> statement, used to return a value from a function.</li>
<li>The <code>import</code> statement, which is used to import modules whose functions or variables can be used in the current program.</li>
</ul>
</p>
</article>
</section>
<section class="main-section" id="Hello_world">
<header>Hello world</header>
<article>
<p>
To get started with writing Python, open the terminal and write your first "Hello world" Python code:
</p>
<code id="hello">
print('Hello, world!')
</code> <br>
or <br>
<code id="hello">
name = "Your name" <br>
Hello_World = "Hello " + "Your name" <br>
print(Hello_world)
</code>
</article>
</section>
<section class="main-section" id="Methods">
<header>Methods</header>
<article>
<p>
Methods on objects are functions attached to the object's class; the syntax <code>instance.method(argument)</code> is, for normal methods and functions, syntactic sugar for <code>Class.method(instance, argument)</code>. Python methods have an explicit <code>self</code> parameter to access instance data, in contrast to the implicit self (or <code>this</code>) in some other object-oriented programming languages (e.g., C++, Java, Objective-C, or Ruby). Apart from this, Python also provides methods, often called dunder methods (due to their names beginning and ending with double-underscores), to allow user-defined classes to modify how they are handled by native operations such as length, comparison, in arithmetic operations, type conversion, and many more.
</p>
</article>
</section>
<section class="main-section" id="Typing">
<header>Typing</header>
<article>
<p>
Python uses duck typing and has typed objects but untyped variable names. Type constraints are not checked at compile time; rather, operations on an object may fail, signifying that the given object is not of a suitable type. Despite being dynamically-typed, Python is strongly-typed, forbidding operations that are not well-defined (for example, adding a number to a string) rather than silently attempting to make sense of them.
</p>
<p>
Python allows programmers to define their own types using classes, which are most often used for object-oriented programming. New instances of classes are constructed by calling the class (for example, <code>SpamClass()</code> or <code>EggsClass()</code>), and the classes are instances of the metaclass <code>type</code> (itself an instance of itself), allowing metaprogramming and reflection.
</p>
<p>
Before version 3.0, Python had two kinds of classes: old-style and new-style. The syntax of both styles is the same, the difference being whether the class <code>object</code> is inherited from, directly or indirectly (all new-style classes inherit from <code>object</code> and are instances of <code>type</code>). In versions of Python 2 from Python 2.2 onwards, both kinds of classes can be used. Old-style classes were eliminated in Python 3.0.
</p>
<p>
The long-term plan is to support gradual typing and from Python 3.5, the syntax of the language allows specifying static types but they are not checked in the default implementation, CPython. An experimental optional static type checker named mypy supports compile-time type checking.
</p>
</article>
</section>
<section class="main-section" id="Libraries">
<header>Libraries</header>
<article>
<p>
Python's large standard library, commonly cited as one of its greatest strengths, provides tools suited to many tasks. For Internet-facing applications, many standard formats and protocols such as MIME and HTTP are supported. It includes modules for creating graphical user interfaces, connecting to relational databases, generating pseudorandom numbers, arithmetic with arbitrary-precision decimals, manipulating regular expressions, and unit testing.
</p>
<p>
Some parts of the standard library are covered by specifications (for example, the Web Server Gateway Interface (WSGI) implementation <code>wsgiref</code> follows PEP 333), but most modules are not. They are specified by their code, internal documentation, and test suites. However, because most of the standard library is cross-platform Python code, only a few modules need altering or rewriting for variant implementations.
</p>
<p>
As of September 2021, the Python Package Index (PyPI), the official repository for third-party Python software, contains over 329,000 packages with a wide range of functionality, including:
<ul>
<li>Automation</li>
<li>Data analytics</li>
<li>Databases</li>
<li>Documentation</li>
<li>Graphical user interfaces</li>
<li>Image processing</li>
<li>Machine learning</li>
<li>Mobile apps</li>
<li>Multimedia</li>
<li>Computer networking</li>
<li>Scientific computing</li>
<li>System administration</li>
<li>Test frameworks</li>
<li>Text processing</li>
<li>Web frameworks</li>
<li>Web scraping</li>
</ul>
</p>
</article>
</section>
<section class="main-section" id="Development">
<header>Development</header>
<article>
<p>
Python's development is conducted largely through the Python Enhancement Proposal (PEP) process, the primary mechanism for proposing major new features, collecting community input on issues and documenting Python design decisions. Python coding style is covered in PEP 8. Outstanding PEPs are reviewed and commented on by the Python community and the steering council.
</p>
<p>
Enhancement of the language corresponds with development of the CPython reference implementation. The mailing list python-dev is the primary forum for the language's development. Specific issues are discussed in the Roundup bug tracker hosted at bugs.python.org. Development originally took place on a self-hosted source-code repository running Mercurial, until Python moved to GitHub in January 2017.
</p>
<p>
CPython's public releases come in three types, distinguished by which part of the version number is incremented:
<ul>
<li>Backward-incompatible versions, where code is expected to break and needs to be manually ported. The first part of the version number is incremented. These releases happen infrequently—version 3.0 was released 8 years after 2.0.</li>
<li>Major or "feature" releases are largely compatible with the previous version but introduce new features. The second part of the version number is incremented. Starting with Python 3.9, these releases are expected to happen annually. Each major version is supported by bugfixes for several years after its release.</li>
<li>Bugfix releases, which introduce no new features, occur about every 3 months and are made when a sufficient number of bugs have been fixed upstream since the last release. Security vulnerabilities are also patched in these releases. The third and final part of the version number is incremented.</li>
</ul>
</p>
<p>
Many alpha, beta, and release-candidates are also released as previews and for testing before final releases. Although there is a rough schedule for each release, they are often delayed if the code is not ready. Python's development team monitors the state of the code by running the large unit test suite during development.
</p>
<p>
The major academic conference on Python is PyCon. There are also special Python mentoring programmes, such as Pyladies.
</p>
<p>
Python 3.10 deprecated <code>wstr</code> (to be removed in Python 3.12; meaning Python extensions need to be modified by then), and added pattern matching to the language.
</p>
</article>
</section>
<section class="main-section" id="Development_environments">
<header>Development environments</header>
<article>
<p>
Most Python implementations (including CPython) include a read–eval–print loop (REPL), permitting them to function as a command line interpreter for which the user enters statements sequentially and receives results immediately.
</p>
<p>
Python comes with a Integrated development environment (IDE) called IDLE, which is more beginner based.
</p>
<p>
Other shells, including IDLE and IPython, add further abilities such as improved auto-completion, session state retention and syntax highlighting.
</p>
<p>
As well as standard desktop integrated development environments, there are Web browser-based IDEs; SageMath (intended for developing science and math-related Python programs); PythonAnywhere, a browser-based IDE and hosting environment; and Canopy IDE, a commercial Python IDE emphasizing scientific computing.
</p>
</article>
</section>
<section class="main-section" id="Popularity">
<header>Popularity</header>
<article>
<p>
Since 2003, Python has consistently ranked in the top ten most popular programming languages in the TIOBE Programming Community Index where, as of October 2021, it is the most popular language (ahead of Java, and C). It was selected Programming Language of the Year (for "the highest rise in ratings in a year") in 2007, 2010, 2018, and 2020 (the only language to do so four times).
</p>
<p>
An empirical study found that scripting languages, such as Python, are more productive than conventional languages, such as C and Java, for programming problems involving string manipulation and search in a dictionary, and determined that memory consumption was often "better than Java and not much worse than C or C++".
</p>
<p>
Large organizations that use Python include Wikipedia, Google, Yahoo!, CERN, NASA, Facebook, Amazon, Instagram, Spotify and some smaller entities like ILM and ITA. The social news networking site Reddit was written mostly in Python.
</p>
</article>
</section>
<section class="main-section" id="Reference">
<header>Reference</header>
<article>
<ul>
<li>All the documentation in this page is taken from
<a href="https://en.wikipedia.org/wiki/Python_(programming_language)"
target="_blank">Wikipedia</a>
</li>
</ul>
</article>
</section>
</main>
html,
body {
min-width: 290px;
color:#4d4e53;
background-color: #ffffff;
font-family: 'Open Sans', Arial, sans-serif;
line-height: 1.5;
}
#navbar {
position: fixed;
min-width: 290px;
top: 0px;
left: 0px;
width: 300px;
height: 100%;
border-right: solid;
border-color: grey;
}
header {
color: black;
margin: 10px;
text-align: center;
font-size: 1.7em;
font-weight: thin;
}
#main-doc header {
text-align: left;
margin: 0px;
}
#navbar ul {
height: 88%;
padding: 0;
overflow-y: auto;
overflow-x: hidden;
}
#navbar li {
color: #4d4e53;
border-top: 1px solid;
list-style: none;
position: relative;
width: 100%;
}
#navbar a {
display: block;
padding: 16px 30px;
text-decoration: none;
color: #4d4e53;
cursor: pointer;
}
#main-doc {
position: absolute;
margin-left: 310px;
padding: 20px;
margin-bottom: 110px;
}
section article {
color: #4d4e53;
margin: 15px;
}
section li {
margin: 15px 0px 0px 20px;
}
code {
text-align: left;
whitespace: pre-line;
position: relative;
word-break: normal;
word-wrap: normal;
line-height: 2;
background-color: #f7f7f7;
padding: 5px;
margin: 5px;
border-radius: 5px;
}
#hello {
display: block;
}
@media only screen and (max-width: 815px) {
#navbar ul {
border: 1px solid;
height: 207px;
}
#navbar {
background-color: white;
position: absolute;
top: 0;
padding: 0;
margin: 0;
width: 100%;
max-height: 275px;
border: none;
z-index: 1;
border-bottom: 2px solid;
}
#main-doc {
position: relative;
margin-left: 0px;
margin-top: 280px;
}
}
@media only screen and (max-width: 400px) {
#main-doc {
margin-left: -10px;
}
#hello {
margin-left: -20px;
width: 100%;
padding: 15px 45px 5px 10px;
min-width: 270px;
}
}
Also see: Tab Triggers