Duke Dumont - Ocean Drive

Вывод кода с подсветкой синтаксиса



Для вывода кода на странице есть отличный плагин Javascript code prettifier от Google. Все что нужно сделать это подключить его и поместить свой код в контейнер: 

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<pre class="prettyprint">
здесь код
</pre>

Все, урок закончен, дальше можно не читать, там будут излишние подробности)).

Для обозначения кода можно использовать теги '<pre>', '<code>' или '<xmp>' с классом 'prettyprint'. Из коробки поддерживаются следующие языки: C и подобные, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefiles и Rust.

А еще плагин поддерживает много других языков программирования, но в качестве расширений библиотеки. Полный список: Apollo; Basic; Clojure; CSS; Dart; Erlang; Go; Haskell; Lasso; Lisp, Scheme; Llvm; Logtalk; Lua; Matlab; MLs: F#, Ocaml,SML; Mumps; Nemerle; Pascal; Protocol buffers; R, S; RD; Rust; Scala; SQL; Swift; TCL; Latek; Visual Basic;VHDL; Wiki; XQ; YAML.

Для указания конкретного языка и стиля нужно добавить параметры при загрузке скрипта ?lang=css&skin=sunburst.

Как вариант, можно загрузить исходники себе и выводить отдельно:

<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>
<pre class="prettyprint">
здесь код
</pre>

Не забудьте активировать скрипт при загрузке страницы, например так <body onload="prettyPrint()">

Пример с использованием php, html, css и javascript:

<?php

    // remove spaces, default on
    if (!(isset($_GET['s']) && !$_GET['s'])) {
        $out = preg_replace('#[ \t]+#', ' ', $out);
    }

?>
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Рога и копыта</title>

        <style>
            /* Стили для фонового видео */
            video#background_video { 
                z-index: 0;
                position: fixed;
                top: 50%;
                left: 50%;
                min-width: 100%;
                min-height: 100%;
                width: auto;
                height: auto;
                -webkit-transform: translateX(-50%) translateY(-50%);
                transform: translateX(-50%) translateY(-50%);
                background: url('/path/to/poster.jpg') no-repeat;
                background-size: cover; 
            }
        </style>

        <script>
            // Немного javaScript'a
            function reachGoal(goalName) {
                try {
                    ga('send', 'event', 'Action', goalName);
                    console.log('Goal: ' + goalName);
                } catch(e) {}
            }
        </script>
    </head>
    <body>
        <!-- Шапка -->
        <header id="header">
            <a href="/" class="logo" title="Логотип">
                <img src="/path/to/logo.png" alt="Логотип" onload="reachGoal('logo is loaded')">
                <span class="slogan">Рога и копыта</span>
            </a>
        </header>
        <!-- /Шапка -->

        <video autoplay loop poster="/path/to/poster.jpg" id="background_video">
            <source src="/path/to/video.mp4" type="video/mp4" />
        </video>
    </body>
</html>