Переключатель темы для Prettify

Со скриптом подсветки синтаксиса Google Code Prettify в комплекте идёт много разнообразных тем оформления. На сайт устанавливается только одна тема. Но в разное время суток, при разном освещении, для посетителей сайта с различными вкусами код в установленной теме смотрится недостаточно контрастно и плохо читаем.

Сейчас я покажу как сделать переключатель между двумя любыми темами.

Перед контейнером с кодом <pre> </pre> вставляем блок <div> </div>.

Светлая ТёмнаяПеренос

<div id="styleSwitch">
  <a href="" id="style1"><p>Светлая</p></a><a href="" id="style2"><p>Тёмная</p></a>
</div>
<pre class='prettyprint linenums' lang-css>
  <!-- Здесь код -->
</pre>

Подключаем к странице необходимые файлы.

Светлая ТёмнаяПеренос

<script src="jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="prettify/prettify.css" />
<script src="prettify/prettify.js"></script> 
<script src="prettify/script.js"></script>
<script src="prettify/prettify_styleswitch.js"></script>

Первым подключен фреймворк Jquery.

В style.css прописываем стили кнопок переключения темы оформления

Светлая ТёмнаяПеренос

/* Buttons styleswitch ************************ */
#styleSwitch {
  width: 100%;
  border-top: 1px solid #949494;
  border-left: 1px solid #949494;
  border-right: 1px solid #949494;
  background: #949494;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}
#styleSwitch a {
  text-decoration: none;
  display: inline-block;
  padding: 5px 15px;
  color: #fff;
}
#style1.selected {
  text-decoration: none;
  pointer-events: none;
  cursor: default;
  background: #fff;
  color: #000;
}
#style2.selected {
  text-decoration: none;
  pointer-events: none;
  cursor: default;
  background: #000;
  color: #fff;
}
#style1:hover {
  background: #fff;
  color: #000;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#style2:hover {
  background: #000;
  color: #fff;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
/* End buttons styleswitch ********************* */

В файле стилей prettify.css прописаны светлая и тёмная темы оформления.

Светлая ТёмнаяПеренос

/* Light theme ************************ */
.prettyprint, .style1 .prettyprint {
  letter-spacing: 0 !important;
  background: #fff;
  font-family: Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
  font-size: 16px;
  border-left: 1px solid #949494;
  border-right: 1px solid #949494;
  border-bottom: 1px solid #949494;
  padding: 10px 0;
  margin: 0 auto;
  max-height: 300px;
  max-width: 800px;
  overflow: auto;
}
.pln, .style1 .pln {
  color: #000;
}
ol.linenums, .style1 ol.linenums {
  margin-top: 0;
  margin-bottom: 0;
  padding: 5px 10px 5px 46px;
}
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9, .style1 li.L0, .style1 li.L1, .style1 li.L2, .style1 li.L3, .style1 li.L4, .style1 li.L5, .style1 li.L6, .style1 li.L7, .style1 li.L8, .style1 li.L9 {
  color: #66747B;
  list-style-type: decimal;
}
.str, .style1 .str {
  color: #718c00;
}
.kwd, .style1 .kwd {
  color: #6500A8;
}
.com, .style1 .com {
  color: #8e908c;
}
.typ, .style1 .typ {
  color: #004BAE;
}
.lit, .style1 .lit {
  color: #f5871f;
}
.pun, .style1 .pun {
  color: #F57600;
}
.opn, .style1 .opn {
  color: #4d4d4c;
}
.clo, .style1 .clo {
  color: #4d4d4c;
}
.tag, .style1 .tag {
  color: #C80000;
}
.atn, .style1 .atn {
  color: #F57600;
}
.atv, .style1 .atv {
  color: #00949F;
}
.dec, .style1 .dec {
  color: #F57600;
}
.var, .style1 .var {
  color: #C80000;
}
.fun, .style1 .fun {
  color: #4271ae;
}
/* End light theme ************************ */
/* Dark theme ***************************** */
.style2 .prettyprint {
  letter-spacing: 0 !important;
  background: #000;
  font-family: Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
  font-size: 16px;
  border-left: 1px solid #949494;
  border-right: 1px solid #949494;
  border-bottom: 1px solid #949494;
  padding: 10px 0;
  margin: 0 auto;
  max-height: 300px;
  max-width: 800px;
  overflow: auto;
}
.style2 .pln {
  color: #000;
}
.style2 ol.linenums {
  margin-top: 0;
  margin-bottom: 0;
  padding: 5px 10px 5px 46px;
}
.style2 li.L0, .style2 li.L1, .style2 li.L2, .style2 li.L3, .style2 li.L4, .style2 li.L5, .style2 li.L6, .style2 li.L7, .style2 li.L8, .style2 li.L9 {
  color: #ccc;
  list-style-type: decimal;
}
.style2 li.L1, .style2 li.L3, .style2 li.L5, .style2 li.L7, .style2 li.L9 {
  background: #111;
}
.style2 .str {
  color: #EC7600;
}
.style2 .kwd {
  color: #93C763;
}
.style2 .com {
  color: #A681D6;
}
.style2 .typ {
  color: #D2D4D4;
}
.style2 .lit {
  color: #FACD22;
}
.style2 .pun {
  color: #F1F2F3;
}
.style2 .pln {
  color: #F1F2F3;
}
.style2 .tag {
  color: #8AC763;
}
.style2 .atn {
  color: #15B8CF;
}
.style2 .atv {
  color: #EC7600;
}
.style2 .dec {
  color: #ECDC00;
}
/* End dark theme ************************ */

prettify.js и script.js - это файлы скрипта Google Code Prettify.

Пишем скрипт переключения темы оформления prettify_styleswitch.js. В скрипте пропишем cookie, которые будут помнить выбор темы при следующем заходе на сайт.

Светлая ТёмнаяПеренос

var $j = jQuery.noConflict();

function switchStyle(styleName) {
  if (styleName) {
    $j('body').removeClass();
    $j('#styleSwitch a').removeClass('selected');
    $j('#' + styleName).addClass('selected');
    $j('body').addClass(styleName);
  }
  createCookie('prettifystyleswitchcookie', styleName, 365);
}

$j(document).ready(function () {
  $j('#styleSwitch a#style1').addClass('selected');
  $j('#styleSwitch a').bind('click', function () {
    switchStyle(this.id);
    return false;
  });
  var c = readCookie('prettifystyleswitchcookie');
  if (c) switchStyle(c);
});

// cookie functions
function createCookie(name, value, days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    var expires = "; expires=" + date.toGMTString();
  } else var expires = "";
  document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}

function eraseCookie(name) {
  createCookie(name, "", -1);
}
// /cookie functions

Готово.

Переключатель темы для Prettify

Рекомендую

Категории

Рекомендую