cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
               <div id="css-table">
  <div id="col-1">
  <ul>
    <li><a href="#col-1-tab-1">Example 3</a></li>
  </ul>
  <div id="col-1-tab-1">
  <article>
   <h1>hexidecimal number</h1>
   <p>
    <b>pattern:</b><br>
    <textarea class="input" id="apgexp-def"></textarea>
   </p>
   <p>
    <b>input string:</b><br>
    <textarea class="input" id="input-data"></textarea>
   </p>
    <p>
    <button id="tryit" class="tryit-button">try it</button>
   </p>
    <p>
    Here is another simple example, but this time the pattern area is enabled.
    You can experiment with it and try out your ABNF skills.
    Don't be discouraged if you make mistakes.
    This example is designed to let you see what happens when you do make them.
   </p>
    <p>
    In fact, the buttons below give you an opportumity to understand what types of mistakes can be made
    and how <b>apg-exp</b> reports them to you.
    </p>
    <p>
    <button id="invalid" class="tryit-button">validation errors</button><br>
    The first thing that <b>apg-exp</b> does is check the input and make sure it doesn't
    have any invalid characters. Only ASCII printing characters plus TAB(\t), LF(\n), CR(\r) are allowed.
    Don't forget the line ending on the last line. This is a very common mistake. 
    </p>
    <p>
    <button id="syntax" class="tryit-button">syntax errors</button><br>
    Next it looks for syntax errors. For example, a rule name that begins with a number
    or an unmatched open parenthesis.
    </p>
    <p>
    <button id="semantic" class="tryit-button">semantic errors</button><br>
    Semantic errors can occur after the syntax is OK but things still don't quite all add up.
    For example, a rule that is used but not defined or a rule that is defined twice.
    </p>
    <p>
    <button id="attribute" class="tryit-button">attributes errors</button><br>
    Even after all of that there are still some things that can go wrong.
    Without getting into the theoretical details of parsing:
    <ul>
    <li>
    left recursion - a rule can't refer to itself as the left-most term in the rule definition:<br>
    <code>R = R "y"/"x"</code>
    </li>
    <li>
    infinite - a rule must always have at least one terminal alternate. For example, the rule<br>
    <code>R = "y" R</code><br>
    never ends. It can only match an infinite string.
    </li>
    <li>
    cyclic - a rule such as<br>
    <code>R = R</code><br>
    is valid syntactically and semantically but obviously defines nothing.
    </li>
    </ul>
    </p>
   </p>
   <div class="discussion">
   </div>
  </article>
  </div>
  </div>
  <div id="col-2">
  <ul>
    <li><a href="#col-2-tab-1">apg-exp</a></li>
  </ul>
  <div id="col-2-tab-1">
  <article>
   <div id="apgexp-result"></div>
  </article>
  </div>
  </div>
 </div>

            
          
!
            
              /* Pen-specific styles */
* {
	box-sizing: border-box;
}

body {
	color: #000;
	font-size: .8rem;
	line-height: 150%;
}

h1 {
	font-size: 1.75rem;
	margin: 0 0 0.75rem 0;
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
}

h2 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
}

article {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
}

b {
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
}

i {
	font-family: 'Open Sans', sans-serif;
	font-style: italic;
}

textarea {
	width: 100%;
}

button {
	cursor: pointer;
	cursor: hand;
}

p.title {
	margin: 0px 0px 3px 0px;
}

a.link {
	color: #4284B0;
}

a.link:visited {
	color: #9c4be7;
}

textarea.input {
	font-size: .9rem;
	font-family: monospace;
}

/* Pattern styles */
#css-table {
	display: table;
}

#col-1 {
	display: table-cell;
	width: 40%;
	border: 1px solid #4284B0;
}

#col-2 {
	display: table-cell;
	width: 60%;
	border-width: 1px 0px;
	border-style: solid;
	border-color: #4284B0;
}

button {
	font-size: 1em;
	font-weight: bold;
	cursor: pointer;
	cursor: hand;
	margin: 0px 0px 2px 0px;
}

button.tryit-button {
  width: 10rem;
}


#apgexp-def, #input-data {
	width: 95%;
	font-size: .9rem;
	font-family: monospace;
}

#apgexp-def {
	height: 15em;
}
            
          
!
            
              var strings = {};
var $result, $abnf, $data;

// ApgExp instantiation and execution
var execute = function() {
  var exp, result, output;
  try {
    exp = new ApgExp($abnf.val());
    result = exp.exec($data.val());
    if (result) {
      output = result.toHtml();
    } else {
      output = "<pre>result: null\n</pre>";
    }
  } catch (e) {
    if (e.name === "ApgExpError") {
      output = e.toHtml();
    } else if(e instanceof Error){
      output = "<pre>Error thrown:\n";
      output += e.message;
      output += "\n</pre>";
    }else{
      output = "<pre>unrecognized exception thrown:\n";
      output += e;
      output += "\n</pre>";
    }
  }
  $result.html(output);
}
var tryit = function(){
  execute();
}
var invalid = function(){
  $abnf.val(strings.invalid);
  execute();
}
var syntax = function(){
  $abnf.val(strings.syntax);
  execute();
}
var semantic = function(){
  $abnf.val(strings.semantic);
  execute();
}
var attribute = function(){
  $abnf.val(strings.attribute);
  execute();
}
$(document).ready(function() {
  
  // SABNF pattern syntax
  strings.hex  = 'hexidecimal = %^ %d92.120 (4hex / 2hex / hex) %$ ; \\x00 or \\x0000 or \\x00000000\n';
  strings.hex += 'hex         = 2digit   ; 2 hex digits\n';
  strings.hex += 'digit       = %d48-57  ;    0-9\n';
  strings.hex += '            / %d65-70  ; or A-F\n';
  strings.hex += '            / %d97-102 ; or a-f\n';

  // SABNF pattern syntax with invalid charactes
  strings.invalid  = 'hexidecimal = %^ %d92.120 \x80 (4hex / 2hex / hex) %$\n';
  strings.invalid += 'hex         = 2digit   ; 2 hex digits\n';
  strings.invalid += 'digit       = %d48-57  ;    0-9\n';
  strings.invalid += '            / \xab %d65-70  ; or A-F\n';
  strings.invalid += '            / %d97-102 ; or a-f';

  // SABNF pattern syntax with syntax errors
  strings.syntax  = 'hexidecimal = %^ %d92.120 (4hex / 2hex / hex  %$\n';
  strings.syntax += '1hex         = 2digit   ; 2 hex digits\n';
  strings.syntax += 'digit       = #d48-57  ;    0-9\n';
  strings.syntax += '            / %d65-70  ; or A-F\n';
  strings.syntax += '            / %d97-102 ; or a-f\n';

  // SABNF pattern syntax with semantic errors
  strings.semantic  = 'hexidecimal = %^ %d92.120 (4misspelled-hex / 2hex / hex) %$\n';
  strings.semantic += 'hex         = 2digit   ; 2 hex digits\n';
  strings.semantic += 'digit       = %d57-48  ;    0-9\n';
  strings.semantic += 'digit       = %d48-59  ;    0-9\n';
  strings.semantic += '            / %d65-70  ; or A-F\n';
  strings.semantic += '            / %d97-102 ; or a-f\n';

  // SABNF pattern syntax with attribute errors
  strings.attribute  = '';
  strings.attribute += '; not a hexidecimal number, obviously\n';
  strings.attribute += '; demonstrates attribute errors\n';
  strings.attribute += 'R      = R "y" / "x"\n';
  strings.attribute += 'inf    = "y" inf\n';
  strings.attribute += 'cyclic = cyclic\n';
  
  // initial input string value for the hexidecimal number
  strings.input = "\\x00FF";
  
  // jQuery values
  $result = $("#apgexp-result");
  $abnf = $("#apgexp-def");
  $data = $("#input-data");

  // page setup
  $abnf.val(strings.hex);
  $data.val(strings.input);
  $("#tryit").click(execute);
  $("#invalid").click(invalid);
  $("#syntax").click(syntax);
  $("#semantic").click(semantic);
  $("#attribute").click(attribute);
  $("#col-1").tabs();
  $("#col-2").tabs();
});

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console