Использовать библиотеку можно разными способами.
Простой способ.
- Подключить на странице требуемые библиотеки (jQuery и Rangy) и саму Морфану.
- Слова, для которых требуется разметка, заключить в <span> с атрибутом data-morfana-markup, в значение которого прописать код разметки. Подробнее о разметке читайте в Документация→Синтаксис
После того, как страница и все требуемые скрипты загрузятся, Морфана автоматически выполнит разметку. Ниже представлен пример полноценной страницы.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/rangy/1.2.3/rangy-core.js"></script> <script type="text/javascript" src="http://cdn.morfana.kityan.ru/latest/morfana.min.js"></script> </head> <body> <span data-morfana-markup="ko:1-5;ok:6-6;ko:7-10;su:11-11;ok:12-13;osL:1-5;osR:7-11">десятиэтажный</span> </body> </html>
Обратите внимание, что все js-скрипты загружаются с других серверов. Разумеется, их можно скачать и обеспечить подгрузку с сервера своего сайта.
Непростой способ.
В код страницы добавляется скрипт конфигурирования. Например:
<script type="text/x-morfana-config">Morfana.configure({autoStart: false, freezeWord: false});</script>
В этом случае Морфана загружается, но не кидается сразу в бой. Это дает возможность запустить обработку страницы или отдельных слов по нужным событиям. А значит можно делать разные интерактивные штуки – редактор разметки или упражнение с проверкой. Подробнее о конфигурации читайте в Документация→Конфигурация.
Соответственно, в собственном коде вы можете написать нечто подобное*:
<a href="#" onclick="Morfana.draw(); return false;">обработать всю страницу - все элементы, имеющие атрибут data-morfana-markup</a>
<a href="#" onclick="Morfana.draw('#word1'); return false;">обработать слово в span c id = word1, разметка будет взята из атрибута data-morfana-markup. Если атрибута нет, будет выполнена попытка найти все дочерние элементы с этим атрибутом и обработать их</a>
<a href="#" onclick="Morfana.draw('#word2', 'ok:9-9;'); return false;">обработать слово в span c id = word2, передав разметку и проигнорировав собственный атрибут элемента, если он есть</a>
* inline JavaScript здесь для наглядности, не делайте так! 
Внимание!
Перед использованием рекомендуется проверить, устраивают ли вас требования по совместимости.
Настоятельно не рекомендуется использовать для отображения слов, обрабатываемых этой библиотекой, подгружаемые шрифты. На данный момент еще не решена проблема, из-за которой расчёты размеров и расположения условных обозначений морфем выполняются до окончания загрузки подгружаемого шрифта на основе параметров системного. В результате визуализация может быть некорректной.
Следует иметь ввиду, что библиотека требовательна к ресурсам, и даже небольшое количество слов на одной странице может обрабатываться медленно. Библиотека написана таким образом, что это не приведёт даже к временному «подвисанию» страницы, однако обработка слов будет происходить по очереди, и это будет заметно пользователю (особенно на «медленных» устройствах). В перспективе планируется повысить быстродействие библиотеки, но ключевые особенности реализации скорее всего не позволят добиться существенных изменений.