- var theme_customizer      = true;
- var tooltip               = true;
- var ace_editor            = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = true;
- var scrollbar             = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container-fluid
            .page-title
              .row
                .col-6
                  h3
                    | ACE Code Editor 
                .col-6
                  ol.breadcrumb
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Editors
                    li.breadcrumb-item.active  ACE Code Editor 
          // Container-fluid starts
          .container-fluid
            .row
              .col-xl-6
                .card
                  .card-header
                    h5 Javascript Mode
                  .card-body
                    #editor.ace-editor
                      | /* Sample JavaScript edit source */
                      | // Define a module
                      | var app = angular.module('app', ['ui.bootstrap']);
                      | // Define a conroller.
                      | app.controller('GrokController', ['$scope', '$filter',
                      | function($scope, $filter) {
                      | $scope.today = function() {
                      | $scope.dt = new Date();
                      | };
                      | $scope.today();
                      | $scope.isOpened = false;
                      | $scope.open = function($event) {
                      | $event.preventDefault();
                      | $event.stopPropagation();
                      | $scope.isOpened = true;
                      | };
                      | }]);
                      | /* End of sample edit source */
              .col-xl-6
                .card
                  .card-header
                    h5 Html Mode
                  .card-body
                    #html-editor.ace-editor
                      | &lt;!--Page header start--&gt;
                      | &lt;div class="page-header"&gt;
                      | &lt;div class="row"&gt;
                      | &lt;div class="col-xl-6"&gt;
                      | &lt;h3&gt;Ace Text editor&lt;/h3&gt;
                      | &lt;/div&gt;
                      | &lt;div class="col-xl-6"&gt;
                      | &lt;ol class="breadcrumb pull-right"&gt;
                      | &lt;li class="breadcrumb-item"&gt;
                      a(href='#')
                        i.fa.fa-home
                      | &lt;/li&gt;
                      |             &lt;li class="breadcrumb-item"&gt;Editor &lt;/li&gt;
                      |             &lt;li class="breadcrumb-item active"&gt;Ace Text editor&lt;/li&gt;
                      |           &lt;/ol&gt;
                      |        &lt;/div&gt;
                      |     &lt;/div&gt;
                      | &lt;/div&gt;
                      | &lt;!--Page header end--&gt;
              .col-xl-6
                .card
                  .card-header
                    h5 css Mode
                  .card-body
                    #css-editor.ace-editor
                      | .text-layer
                      | {
                      | font: 12px Monaco, "Courier New", monospace;
                      | font-size: 3vmin;
                      | cursor: text;
                      | }
                      | .blinker {
                      | animation: blink 1s linear infinite alternate;
                      | }
                      | @keyframes blink {
                      | 0%, 40% {
                      | opacity: 1
                      | }
                      | 40.5%, 100% {
                      | opacity: 1
                      | }
                      | }
                      | @document url(http://c9.io/), url-prefix(http://ace.c9.io/build/),
                      | domain(c9.io), regexp("https:.*") /**/
                      | {
                      | /**/
                      | img[title]:before
                      | {
                      | content: attr(title) "\AImage \retrieved from" attr(src); /**/
                      | white-space: pre;
                      | display: block;
                      | background: url(asdasd); "err
                      | }
                      | }
                      | @viewport {
                      | min-zoom: 1;
                      | max-zoom: 200%;
                      | user-zoom: fixed;
                      | }
              .col-xl-6
                .card
                  .card-header
                    h5 php Mode
                  .card-body
                    #php-editor.ace-editor
                      | &lt;?php
                      | function nfact($n) {
                      | if ($n == 0) {
                      | return 1;
                      | }
                      | else {
                      | return $n * nfact($n - 1);
                      | }
                      | }
                      | echo "\n\nPlease enter a whole number ... ";
                      | $num = trim(fgets(STDIN));
                      | // ===== PROCESS - Determing the factorial of the input number =====
                      | $output = "\n\nFactorial " . $num . " = " . nfact($num) . "\n\n";
                      | echo $output;
                      | ?&gt;
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
