Ria SourceTabs 1.0.1 Download

Описание

Ria SourceTabs предназначен для демонстрации исходного кода на вашей странице в виде закладок.

Как это выглядит

Как это работает

• Для подсветки синтаксиса используется JavaScript-библиотека Prettify. Prettify поддерживает C-подобный синтаксис, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript и Makefiles.
  С помощью расширений можно включить поддержку LISP, Haskell, LUA, OCAML, SML, F#, Visual Basic, SQL, Protocol Buffers и WikiText
• В качестве JavaScript-фремворка используется MooTools 1.2 а также одно из его расширений Storables
• За основу взял базовый класс Sortable Simple Tabs, но поскольку он писался под 1.2dev, я его немного подправил.
• Исходный код загружается с помощью Ajax-запроса, поэтому локально работать не будет.

Как подключить себе на страничку

• В header-а вашей html-странички подключаем все библиотеки для работы:

      <!-- Mootools 1.2 -->
      <script type="text/javascript" src="js/mootools-1.2.1-core-nc.js"></script>
      <script type="text/javascript" src="js/Storables.js"></script>
      
      <!-- RIA Source Tabs -->
      <script type="text/javascript" src="js/SimpleTabs.js"></script>
      <script type="text/javascript" src="js/Ria_SourceTabs.js"></script>
      <link rel="stylesheet" type="text/css" href="css/Ria_SourceTabs.css" />
      
      <!-- Prettify -->
      <link type="text/css" rel="stylesheet" href="css/prettify.css" />
      <script type="text/javascript" src="js/prettify/prettify.js"></script>

• Если подсветить нужно специфический язык, например Haskell, надо подключить еще prettify-плагин:

  	<script type="text/javascript" src="js/prettify/lang-hs.js"></script>

• Сами закладки описываем с помощью HTML-кода:

      <div id="tab-block-2">
          <ul class="tab-menu">
              <li><a href="Ria_SourceTabs.html">Ria_SourceTabs.html</a></li>
              <li><a href="js/Ria_SourceTabs.js">Ria_SourceTabs.js</a></li>
              <li><a href="css/Ria_SourceTabs.css">Ria_SourceTabs.css</a></li>
          </ul>
      </div>

• Эту часть CSS я специально вынес в отдельную директиву, если height не будет указан, то код будет показываться полностью без скроллинга. Конечно же, вы можете задать этот параметр непосредственно в Ria_SourceTabs.css.

      <style>.tab-wrapper { height: 200px; }</style>

• В конце странички подключаем JavaScript:

      <script>
      // This one has links with href's, taken as ajax content (take a look at firebug!)
      var tabs2 = new Ria_SourceTabs($('tab-block-2'), {
          entrySelector: 'li a',
          ajaxOptions: {
              method: 'get'
          }
      });
      </script>

История изменений

• Версия 1.0.1 - 18/05/2009

  Обновил prettify и mootools

• Версия 1.0 - 08/01/2009

  Для одной из моих статей, понадобилось показать исходный код на нескольких языках программирования, да так, чтоб код был читаем, и чтоб человеку для его изучения не приходилось открывать специальный софт или вглядываться в обычный текст.
  Для решения этой задачи решил использовать prettify, и все что оставалось - "завернуть" этот модуль в удобный интерфейс.

Скачать

Загрузить архив Ria SourceTabs со всеми библиотеками. Внимание, работать будет только на Web-сервере!
Скрипты будут грузиться только с домена, на котором находится страничка.