Вывод кода с подсветкой синтаксиса
Для вывода кода на странице есть отличный плагин 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>