Подсветка синтаксиса - SyntaxHighlighter на Blogger.com

воскресенье, июля 26, 2015 Nata Ki 0 Comments


Блог будет посвящен программированию и поэтому придется выкладывать исходные тексты программ (листинги). Вообще для удобства восприятия, листинги форматируют - подсвечивают синтаксис. К сожалению на блогспоте возможности очень ограниченны, что сильно сокращает выбор таких инструментов. Приходится искать варианты.

Для подсветки синтаксиса на блогспоте можно использовать JavaScript библиотеку "SyntaxHighlighter by Alex Gorbatchev". Библиотека не требует размещения непосредственно на сайте и не используется на стороне сервера. Что как раз и нужно на блогспоте. После знакомства с библиотекой SyntaxHighlighter можно интегрировать ее с Вашим блогом. Как именно встроить библиотеку в блок - написано тут: Embed Code Syntax Highlighting in Blog


Если коротко, то в шаблоне перед тегом </head> надо вставить такой текст:

<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>


  Как подсвечивать код в сообщениях? Для этого нажимаем кнопку <HTML>, тем самым переходим в режим редактирования исходного html-кода страницы, и затем нужный текст листинга помещаем внутрь тега <pre>: 
<pre class="brush: java"> /** * Hello World! on Java */ public void SayHello() { if (counter <= 10) System.out.println("Hello World!"); //some comments } </pre>
В результате на странице листинг будет выглядеть так:
    /**
     * Hello World! on Java
     */
    public void SayHello()
    {
        if (counter <= 10)
            System.out.println("Hello World!"); //some comments
    }

Библиотека поддерживает разные языки программирования и стили разметки страниц. Для этого используется класс brush  с разными алиасами, вот полный список алиасов:

actionscript3
bash, shell
c-sharp, csharp
cpp, c
css  
delphi, pas, pascal
diff, patch
groovy
js, jscript, javascript
java
jfx, javafx
perl, pl
php
plain, text
ps, powershell
py, python
rails, ror, ruby
scala
sql
vb, vbnet
xml, xhtml, xslt, html, xhtml

При отображении html-тегов придется заменять символ "<" на его код "&lt;", а символ ">" на код "&gt;". Чтобы не делать эти замены вручную, была создана отдельная утилита: http://code-highlight.appspot.com/

Итого все очень просто, удобно и красиво.




0 коммент.:

Как подключить Google Fonts к сайту?

воскресенье, июля 26, 2015 Nata Ki 0 Comments

Все из вас, наверно, мечтают сделать свои или клиентские сайты более лаконичными и привлекательными.

Одними из главных факторов, который отвечает за восприятие информации на сайте, являются шрифты и то, как мы их используем вместе. Так как на одном сайте, чаще всего употребляется двое и более разновидностей шрифтов, например для заголовков и просто основного текста.

Одна из возможностей, визуально улучшить читаемость текстов – это подключение сторонних шрифтов. Ведь все наверно знают, какая “бедная” стандартная коллекция кириллических шрифтов в Windows, которая отвечает за отображение текста в браузере.

Стандартные шрифты:

Google Fonts

Cufon и @font-face

Ранее я уже писал про Cufon, с помощью которого можно подключать не стандартные шрифты к сайту. А сейчас рассмотрим более простой способ – это правило @font-face в css и подгрузкой самого шрифта с хранилища шрифтов Google Fonts.
Вся разница между Cufon и @font-face в том, что первый использует js для эмулирование шрифта и прорисовывает символы своими средствами, а @font-face подгружает сам шрифт на компьютер посетителя и браузер уже использует его для отображения текста.
В любом случае Cufon и @font-face уменьшают скорость загрузки сайта, хоть и не значительно.

Использование Google Fonts на сайте

Не буду расписывать много и долго, я приведу конкретный пример подключения Google Fonts, на примере этого блога.
Как видите, заголовки статей и подзаголовки у меня выполнены в не стандартном шрифте, вот сейчас на практике я покажу как такое сделать, а вы уже по аналогии будете пробовать на своих сайтах.

Выбор шрифта в репозитории

Чтобы не пугались, объясню – репозиторий это хранилище, но по-буржуйски. Итак, заходим на http://www.google.com/fonts/ и смотрим для себя подходящий шрифт:
Google Fonts

Немного по меню:
Слева, как видите, находиться блок с всевозможными фильтрами поиска шрифтов, в котором вы можете выбрать, к примеру, только латинские шрифты или кириллические. А сверху, настройки по отображению примеров, которые разделены на 4 вкладки:
  • Word – отображение нескольких букв. В таком режим удобно сравнивать сразу много шрифтов и смотреть как выглядят конкретные символы;
  • Sentence – отображение в виде одного предложения;
  • Paragraph – выводиться большой кусок текста, который позволит наглядно сравнивать шрифт уже в самом тексте;
  • Poster – отображаются заголовки, такой способ сравнения удобен для подбора шрифта, который будет использоваться в заголовках.
Я выбрал шрифт Cuprum и добавил его в свою коллекцию шрифтов:

Google Fonts

Подключение шрифта к сайту

После этого, на панели Collection, которая находиться внизу, заходим во вкладку Use, которая отвечает за использование шрифтов из вашей коллекции. Тут вы сразу увидите, что гугл показывает на сколько ухудшится скорость загрузки страницы:
Google Fonts
Ниже находится панель с выбором “типа отображения”, выбираем Latin (latin) и Cyrillic (cyrillic), что даст нам возможность отображать как латинские, так и кириллические буквы:
Google Fonts
После этого переходим к третьему пункту на этой странице, а именно к самому подключению. Google предлагает нам три варианта встраивания своих шрифтов – через js, стандартный способ через подключение в <head> и @import в css файле. Я использую последний способ.
Открываем свой файл css и прописываем строчку, которую нам предоставил google:
Google Fonts

Всё, шрифт от Google Fonts мы подключили к сайту, теперь как его использовать?

Использование в CSS

Всё достаточно просто, после того, как мы подключили шрифт через @import, нам надо прописать стандартные инструкцию для тех классов и индификаторов, у которых будет использоваться наш новый шрифт. К примеру:
h1, h2, h3 {font-family: 'Cuprum', sans-serif;}
После всех этих манипуляций, у вас будет выводиться заголовки с новым, не стандартным шрифтом.


Источник: http://symby.ru/coding/kak-podklyuchit-google-fonts-k-sajtu/


0 коммент.:

Embedding video stored on Google Drive

воскресенье, июля 26, 2015 Nata Ki 0 Comments

1. Upload your video to Google Drive
2. Right-click the video and choose "Share...”
3. Make sure sharing is set to "Anyone who has the link can view”
4. Copy the "Link to share” from the box at the top of the dialog
5. Click "Done”
6. Paste and open the link in a new tab or browser
7. At the top of the screen, click the icon with three vertical dots and choose "Embed item...”
8. Copy the embed code
9. In Blogger open (or create) the activity/resource where you want to place your video
10. In the editor open the HTML editor
11. Paste the embed code where you want your video to appear.  
12. You may want to change the size of the video - Google's default is 640x480, which is a lot of screen real estate on most devices.  Your users will be able to make it full screen if they wish.

Example HTML (The bold text is the embed code copied in step 8):

<p>My Video</p> <iframe src="https://docs.google.com/file/d/0Bw9mCKrvk_W3MXFKdTvxN7ZLdVE/preview" height="480" width="640"></iframe>

0 коммент.: