Code Block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor

Create Code Blocks

WoodPecker uses PrismJS to render code blocks. To generate a codeblock for any progamming langauge just add the code in a code block <code class="language-html"></code> followed by the 'class="langauge-*"' where '*' is the language of your choice. We support the default PrismJS languages for additional languages you need to download theJS file for the relevant languge and include it in your markup.

                                

<ul class = "nav nav-pills mb-3 mt-4" id = "pills-tab" role = "tablist">
    <li class = "nav-item">
        <a class = "nav-link active" id = "html-tab" data-toggle = "pill" href = "#html"
           role = "tab" aria-controls = "html" aria-selected = "true">HTML</a>
    </li>
    <li class = "nav-item">
        <a class = "nav-link" id = "scss-tab" data-toggle = "pill" href = "#scss"
           role = "tab" aria-controls = "pills-profile" aria-selected = "false">SCSS</a>
    </li>
    <li class = "nav-item">
        <a class = "nav-link" id = "js-tab" data-toggle = "pill" href = "#js"
           role = "tab" aria-controls = "pills-profile" aria-selected = "false">JS</a>
    </li>

</ul>
                                
                            
                        


.wdpk-sticky
{
    position: fixed !important;
    top:      0;
    border:   none; // To reset the inherited border
    @if (map-get($wdpk-sticky-menu-shadow, shadowOn))== false
    {
        -webkit-box-shadow: none;
        box-shadow:         none;
    }

    .wdpk-menu
    {
        justify-content: $wdpk-menu-align-items !important;
        font-size:       $wdpk-sticky-menu-font-size;
        color:           $wdpk-sticky-menu-font-color;

        li
        {
            &:hover > a
            {
                color: $wdpk-sticky-menu-font-color-hover;
            }

            a
            {
                transition: color map-get($wdpk-hover-effect, animationDuration) ease;

                &:hover
                {
                    color: $wdpk-sticky-menu-font-color-hover;
                }
            }
        }
    }
}

                        
                    
                        
jQuery(document).ready(function ()
{
    if (jQuery(".main-carousel").length !== 0)
    {
        let obj = {
            draggable: true,
            dragThreshold: 10, // dragging doesn't start until 10px moved
            cellAlign: 'center',
            freeScroll: false,
            wrapAround: true,
            groupCells: 1, // Accepts Values in numbers eg. 2 format and boolean
            autoPlay: false, // Accepts Values in 1000 format and boolean
            pauseAutoPlayOnHover: false,
            contain: true,
            imagesLoaded: true,
            fullscreen: true,

            selector:'.main-carousel',
        };
        require(["app/shortcodes/wdpkCarousel"], function (e)
        {
            e.publicCall(obj);
        });
    }
});