JSFiddle - React, Tailwind, and code Playground

Same KV Docs attempt but with HighlightJS and Bootstrap

by Cristian Trifan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-debug.js"></script>
<script src="https://rawgit.com/Knockout-Contrib/Knockout-Validation/master/Dist/knockout.validation.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.1/united/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/idea.min.css">
<div class="example col-sm-12">
    <div class="page-header">
         <h1><span class="text-danger">Required</span> Rule</h1>

    </div>
    <div class="alert alert-warning">
        <span>The rule is used to ensure an observable has a value.</span>
    </div>
    <div role="tabpanel">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#example-code" role="tab" data-toggle="tab">Code</a>
            </li>
            <li>
                <a href="#example-output" role="tab" data-toggle="tab">Output</a>
            </li>
            <li>
                <a href="#example-inspect" role="tab" data-toggle="tab">Inspect</a>
            </li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="example-code">
                <script type="text/html">
                    <pre><code class="js">// Configure library to show messages as you type
ko.validation.init({
    // We want the messages to show right away
    messagesOnModified: false,
    
    // We want to decorate the input element right away
    decorateInputElement: true,
    decorateElementOnModified: false
});

var viewModel = {
    name: ko.observable('').extend({required: true})
};

ko.applyBindings(viewModel);</code></pre>
                </script>
            </div>
            <div role="tabpanel" class="tab-pane"...

JavaScript

hljs.initHighlightingOnLoad();
jQuery('script[type="text/html"]').each(function () {
    jQuery(this).parent().html(jQuery(this).html());

});


// Configure library to show messages as you type
ko.validation.init({
    // We want the messages to show right away
    messagesOnModified: false,

    // We want to decorate the input element right away
    decorateInputElement: true,
    decorateElementOnModified: false,

    // Since we are using bootstrap, let's use some custom classes
    errorMessageClass: 'help-block',
    errorElementClass: 'has-error'
});

var viewModel = {
    name: ko.observable('').extend({
        required: true
    })
};

ko.applyBindings(viewModel);