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