Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's 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 it's URL and the proper URL extention.

+ 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

Save Automatically?

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 id="navbar">
  <header>Programming language C</header>
  <ul> 
    <a class="nav-link" href="#Introduction" rel="internal"><li>Introduction</li></a>
    <a class="nav-link" href="#Overview" rel="internal"><li>Overview</li></a>
    <a class="nav-link" href="#Relations_to_other_languages" rel="internal"><li>Relations to other languages</li></a>
    <a class="nav-link" href="#Hello_world" rel="internal"><li>Hello world</li></a>
    <a class="nav-link" href="#Variables_and_arithmetic_expressions" rel="internal"><li>Variables and arithmetic expressions</li></a>
    <a class="nav-link" href="#Copy_of_files" rel="internal"><li>Copy of files</li></a>
    <a class="nav-link" href="#Counting_characters" rel="internal"><li>Counting characters</li></a>
    <a class="nav-link" href="#Arrangements" rel="internal"><li>Arrangements</li></a>
    <a class="nav-link" href="#Functions" rel="internal"><li>Functions</li></a>
    <a class="nav-link" href="#Reference" rel="internal"><li>Reference</li></a>
  </ul>
</nav>
<main id="main-doc">
  <section class="main-section" id="Introduction">
    <header>Introduction</header>
    <article>  
      <p>C (/siː/, as in the letter c) is a general-purpose, imperative computer programming language, supporting structured programming, lexical variable scope and recursion, while a static type system prevents many unintended operations. By design, C provides constructs that map efficiently to typical machine instructions, and therefore it has found lasting use in applications that had formerly been coded in assembly language, including operating systems, as well as various application software for computers ranging from supercomputers to embedded systems.</p>
<p>C was originally developed by Dennis Ritchie between 1972 and 1973 at Bell Labs. It was created to make utilities running on Unix. Later, it is applied to re-implementing the kernel of the Unix operating system[6]. Through 1980s, C gradually gained popularity. Nowadays, it is one of the most widely used programming languages[7][8] with C compilers from various vendors available for the majority of existing computer architectures and operating systems. C has been standardized by the American National Standards Institute (ANSI) since 1989 (see ANSI C) and subsequently by the International Organization for Standardization (ISO).</p>
<li>C is an imperative procedural language. It was designed to be compiled using a relatively straightforward compiler, to provide low-level access to memory, to provide language constructs that map efficiently to machine instructions, and to require minimal run-time support. Despite its low-level capabilities, the language was designed to encourage cross-platform programming</li>
<li>A standards-compliant C program that is written with portability in mind can be compiled for a very wide variety of computer platforms and operating systems with few changes to its source code. The language has become available on a very wide range of platforms, from embedded microcontrollers to supercomputers.</li>
      </artice>
    </section>
  <section class="main-section" id="Overview">
    <header>Overview</header>
    <article>
   <p>Like most imperative languages in the ALGOL tradition, C has facilities for structured programming and allows lexical variable scope and recursion, while a static type system prevents many unintended operations. In C, all executable code is contained within subroutines, which are called "functions" (although not in the strict sense of functional programming). Function parameters are always passed by value. Pass-by-reference is simulated in C by explicitly passing pointer values. C program source text is free-format, using the semicolon as a statement terminator and curly braces for grouping blocks of statements.</p>
      <p>The C language also exhibits the following characteristics:</p>
        <li>There is a small, fixed number of keywords, including a full set of control flow primitives: for, if/else, while, switch, and do/while. User-defined names are not distinguished from keywords by any kind of sigil.</li>
      <li>There are a large number of arithmetical and logical operators, such as +, +=, ++, &, ~, etc.</li>
<li>More than one assignment may be performed in a single statement.</li>
      <li>Function return values can be ignored when not needed.</li>    
      <li>Typing is static, but weakly enforced: all data has a type, but implicit conversions may be performed.</li>
      <li>Declaration syntax mimics usage context. C has no "define" keyword; instead, a statement beginning with the name of a type is taken as a declaration. There is no "function" keyword; instead, a function is indicated by the parentheses of an argument list.</li>
      <li>User-defined (typedef) and compound types are possible. </li>
      <li>Heterogeneous aggregate data types (struct) allow related data elements to be accessed and assigned as a unit.</li>
      <li>Union is a structure with overlapping members; only the last member stored is valid.</li>
      <li>Array indexing is a secondary notation, defined in terms of pointer arithmetic. Unlike structs, arrays are not first-class objects; they cannot be assigned or compared using single built-in operators. There is no "array" keyword, in use or definition; instead, square brackets indicate arrays syntactically, for example month[11].</li>
      <li>Enumerated types are possible with the enum keyword. They are freely interconvertible with integers.</li>
      <li>Strings are not a separate data type, but are conventionally implemented as null-terminated arrays of characters.</li>
      <li>Low-level access to computer memory is possible by converting machine addresses to typed pointers.</li>
      <li>Procedures (subroutines not returning values) are a special case of function, with an untyped return type void.</li>
      <li>Functions may not be defined within the lexical scope of other functions.</li>
      <li>Function and data pointers permit ad hoc run-time polymorphism.</li>
      <li>A preprocessor performs macro definition, source code file inclusion, and conditional compilation.</li>
      <li>There is a basic form of modularity: files can be compiled separately and linked together, with control over which functions and data objects are visible to other files via static and extern attributes.</li>
      <li>Complex functionality such as I/O, string manipulation, and mathematical functions are consistently delegated to library routines.</li>
      <p>While C does not include some features found in some other languages, such as object orientation or garbage collection, such features can be implemented or emulated in C, often by way of external libraries (e.g., the Boehm garbage collector or the GLib Object System).</p>
      </artice>
    </section>
  <section class="main-section" id="Relations_to_other_languages">
    <header>Relations to other languages </header>
    <article>
<p>Many later languages have borrowed directly or indirectly from C, including C++, C#, Unix's C shell, D, Go, Java, JavaScript, Limbo, LPC, Objective-C, Perl, PHP, Python, Rust, Swift, Verilog and SystemVerilog (hardware description languages).[5] These languages have drawn many of their control structures and other basic features from C. Most of them (with Python being the most dramatic exception) are also very syntactically similar to C in general, and they tend to combine the recognizable expression and statement syntax of C with underlying type systems, data models, and semantics that can be radically different.</p> 
    </article>
    </section>
  <section class="main-section" id="Hello_world">
    <header>Hello world</header>
    <article> 
First program in C:
<code>#include &lt;stdio.h&gt;
  
int main(void) {
  printf("hello, world\n");

  return 0;
}
</code>
The way to execute this program depends on the system that is being used. Specific example, UNIX operating system that the program should be created in a file whose name ends with "c", as hello.c and then compile it with the order:
      cc hello.c
    </article>
    </section>
  <section class="main-section" id="Variables_and_arithmetic_expressions">
    <header>Variables and arithmetic expressions</header>
   <p>
Table Farenheit temperatures and their centigrade equivalents to Celsius:
</p>
    <p> Example while <code>
        #include &lt;stdio.h&gt;
        
        int main() {
        
        int fahr, celsius;
        int lower, upper, step;
        
        lower = 0;
        upper = 300;
        step = 20;
        
        fahr = lower;
        while(fahr <= upper) {
         celsius = 5 * (fahr - 32) / 9;
          printf("%d\t%d\n", fahr, celius);
           fahr = fahr + step;
           }
        }
        </code>
      </p>
      <p>
example proposition for:<code>
        #include &lt;stdio.h&gt;
        
        int main() {
        
        int fahr;
        
        for(fahr = 0; fahr <= 300; fahr = fahr + 20)
             printf("%3d%6.1f\n", fahr, (5.0/9.0) * (fahr - 32));
        }
        </code> 
        </p>
        The for proposition is a cycle, a generalized form of the while. If you compare it with the previous while, your operation should be clear.
    </section>
  <section class="main-section" id="Copy_of_files">
    <header>Copy of files</header>
    <article>
  <p>With getchar and putchar you can write a surprising amount of useful code without knowing anything else about the input and output. The simplest example is a program that copies the input to the output, one character at a time:</p>
 <code>#include  &lt;stdio.h&gt;
   int main() 
   {
      int c;
   
   c = getchar();
   while (c = EoF){
   putchar(c);  
      }
   }</code>
      <p> The relation operator! = Means "not equal to"</p>
    </article>
    </section>
  <section class="main-section" id="Counting_characters">
    <header>Counting characters</header>
    <article>
    <p>The following program counts characters and is similar to the program that you copy.</p>
<code> #include &lt;stdio.h&gt;
  int main(void) {
  long nc;
  
  nc= 0;
  while(getchar(void) != EoF)
      nc++;
  printf("%1d\n, nc");
  }</code>
<p>The nc ++ proposition; presents a new operator, ++, which means increase by one.</p>
    </article>
    </section>
  <section class="main-section" id="Arrangements">
    <header>Arrangements</header>
    <article>
<p>Write a program to count the number of occurrences of each digit, space characters (blanks, tabs, new line) and all characters. This is artificial, but it allows us to illustrate several aspects of C in a program</p>
<p>There are twelve input categories, so it is convenient to use an array to keep the number of occurrences of each digit, instead of having ten individual variables. This is a version of the program</p>
<code>
  #include &lt;stdio.h&gt;
  int main(void) {
  
  int c, i, nwhite,nother;
  int ndigit[10];
  
  nwhite = nother = 0;
  for(i = 0; i < 10; i++);
                    ndigit[i] = 0;
                   
  while((c = getchar(void)) != EoF)
        if(c >= '0' && c < = '9')
             ndigit++[c -'0'];
  else if(c == '' || c == '\n' || c == '\t')
                            nwhite++;
  else 
                            nother++;
                            
printf("digit =");
for(i = 0; i < 10; i++)
  printf("%d", ndigit[i]);
  printf(", white spaces = %d, other = %d\n", 
  nwhite, nother);
  }</code>
<p>The output of this program when executing it on itself is digits = 9300000001, white spaces = 123, others = 345.</p>
    </article>
    </section>
  <section class="main-section" id="Functions">
    <header>Functions</header>
    <article>
<p>In C language, a function is the equivalent of a subroutine or function in Fortran, or a procedure or function in Pascal. A function provides a convenient way to encapsulate some calculations, which can be used later without worrying about their implementation. With properly designed functions, it is possible to ignore how a job is performed; it is enough to know what is done. The C language makes the use of functions easy, convenient and efficient; It is common to see a short function defined and used only once, only because that clarifies some part of the code.
So far we have only used functions such as printf, getchar and putchar, which have been provided to us; It is now time to write a few ourselves. Since C does not have an exponentiation operator such as Fortran **, we will illustrate the mechanism of defining a function by writing the power (m, n) function, which elevates an integer m to an integer and positive power n. This is the value of power (2,5) is 32. This function is a routine of practical exponentiation, since positive powers of small integers are handled, but it is sufficient for illustration (the standard library contains a function pow (x, y ) that calcucaXy).
Then the power function is presented and a main program to use it, so that the whole structure is seen at once.</p>
<code>#include &lt;stdio.h&gt;
  
  int power(int m, int n);
  
  int main(void){
  
  int i;
  
  for(i = 0; i < 10; i++) {
                    printf("%d%d%d\n", i, power(2,i), power(-3, i));
                    return 0;
  }
  int power(int base, int n){
  int i, p;
                    
  p = 1;
  for(i = 1; i < n; i++)
        p = p * base;
  return p;
  }</code>
    </article>
    </section>
  <section class="main-section" id="Reference">
    <header>Reference</header>
    <article>
      <li>Information taken from this web and the programming language book C. Brian W. Kernighan and Dennis M. Ritchie. <a href="https://en.wikipedia.org/wiki/C_%28programming_language%29" target="_blank">the programming languaje C</a>
    </article>
    </section>
</main>
              
            
!

CSS

              
                @import 'https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet';
html,body{
  min-width:290px;
    color: #4d4e53;
    background-color: #ffffff;
    font-family: 'Roboto', 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:rgba(0,22,22,0.4)
}
header{
  color:black;
  font-size: 30px;
  margin:10px;
  text-align:center;
  font-size:1.8em;
  font-weight:thin;
}
#main-doc header{
  text-align:left;
  margin:0px;
}
#navbar ul{
  height:88%;
  overflow-y:auto;
  overflow-x:hidden;
}
#navbar li{
  color: #4d4e53;
  border:1px solid;
  border-bottom-width:0px;
  padding:8px;
  padding-left:45px;
  list-style: none;
  position:relative;
 left:-50px;
  width:100%;
  
}
#navbar a{
  color: #4d4e53;
    text-decoration:none;
    cursor:pointer;
} 
#main-doc{
  position: absolute;
  margin-left:310px;
  padding:20px;
  margin-bottom:110px;
}
section article{
  color: #4d4e53;
  margin:15px;
  font-size:0.96em;
}
section li {
  margin:15px 0px 0px 20px;
}
code{
  display:block;
    text-align: left;
  white-space: pre;
  position: relative;
    word-break: normal;
    word-wrap: normal;
    line-height: 2;
    background-color:#f7f7f7;
  padding:15px;
  margin:10px;
    border-radius:5px;
}
@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:270px;
  }
  #main-doc section {
  }
}
@media only screen and (max-width: 400px) {
  #main-doc{
    margin-left:-10px;
  }
  code{
    margin-left:-20px;
    width:100%;
    padding:15px;
    padding-left:10px;
    padding-right:45px;
    min-width:233px;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console