Как добавить фрагменты кода, используя TinyMCE и Prism.js

Фрагменты кода — это небольшие блоки многократно используемого кода, разработчики обычно копируют и вставляют код, который они уже написали, код из базы кода своей компании, открытый исходный код и ответы на переполнение стека. Если у вас есть блог, где вы делитесь знаниями с другими разработчиками, вы, возможно, протестировали множество WYSIWYG-редакторов, которые предоставляют простой способ редактирования ваших статей, они выполняют свою основную задачу, однако не очень хорошо работают с фрагментами кода. Проблема, которой нет у людей, которые пишут с разметкой, но как насчет тех, кто использует HTML? К счастью, кто-то услышал наши молитвы, и TinyMCE решил оказать поддержку фрагментам кода с помощью Prism.js. Prism — это легковесная расширяемая подсветка синтаксиса, созданная с учетом современных веб-стандартов. Он используется на тысячах веб-сайтов, включая некоторые из тех, которые вы посещаете ежедневно.

Обсуждение дешево. Покажи мне код.

Линус Торвальдс, основатель Linux

Как добавить фрагмент

Чтобы добавить фрагменты кода к своему контенту, вы можете использовать плагин CodeSample (обычно включается в версию сообщества). Чтобы включить этот плагин, вам нужно всего лишь указать имя плагина «codesample» в свойстве plugins объекта инициализации и добавить кнопку действия на панели инструментов, обозначенную тем же именем «codesample»:

tinymce.init({
selector: 'textarea',
plugins: 'codesample',
toolbar: 'codesample'
});

После того, как вы добавите плагин CodeSample и кнопку действия в панели инструментов, ваша tinymce должна показать новую кнопку:

Кнопка примера кода TinyMCE

Заметка

Этот плагин можно использовать с версии 4.3 TinyMCE. Поэтому это было в «стадии тестирования» и было несколько ошибок и модификаций, однако большинство из них были быстро решены например Вы не можете загрузить более 10 языков для выделения.

Как вы знаете, Prism.js поддерживает хорошие авторские практики. Другие маркеры поощряют или даже заставляют вас использовать элементы, которые семантически неверны, такие как

 (самостоятельно) или , Prism заставляет вас использовать правильный элемент для разметки кода: , Сам по себе для встроенного кода или внутри 
 для блоков кода. Кроме того, язык определяется способом, рекомендованным в проекте HTML5: через language-xxxx учебный класс. С TinyMCE этот язык может быть установлен через элемент выбора, показанный в диалоге ввода кода. Вы можете добавить новые языки при инициализации, установив codesample_languages имущество:

tinymce.init({
selector: 'textarea',
plugins: 'codesample',
codesample_languages: [
{text: 'HTML/XML', value: 'markup'},
{text: 'JavaScript', value: 'javascript'},
{text: 'CSS', value: 'css'},
{text: 'PHP', value: 'php'},
{text: 'Ruby', value: 'ruby'},
{text: 'Python', value: 'python'},
{text: 'Java', value: 'java'},
{text: 'C', value: 'c'},
{text: 'C#', value: 'csharp'},
{text: 'C++', value: 'cpp'}
],
toolbar: 'codesample'
});

Теперь, если вы нажмете кнопку примера кода в TinyMCE, вы должны увидеть диалоговое окно ввода кода:

Пример ввода кода TinyMCE

Все небезопасные символы для сгенерированного HTML (например, HTML-фрагмент внутри) будут автоматически экранированы к его html-символу, поэтому HTML-код, созданный TinyMCE с html-фрагментом, должен выглядеть следующим образом:

Span tag in HTML:

<span>Hello World</span>

Привет, мир !

[/ NOEDIT]

И пользовательский интерфейс:

TinyMCE и Prism.js

Настроить стиль призмы

По умолчанию TinyMCE использует стандартную тему Prism, включенную по умолчанию в плагин. Настраивая codesample_content_css При инициализации с помощью пути к пользовательскому CSS-файлу Prism.css вы можете использовать собственную тему, например, выделение фрагмента кода Наш мир (Okaidia):

tinymce.init({
selector: 'textarea',
plugins: 'codesample',
codesample_languages: [
{text: 'HTML/XML', value: 'markup'},
{text: 'JavaScript', value: 'javascript'},
{text: 'CSS', value: 'css'},
{text: 'PHP', value: 'php'},
{text: 'Ruby', value: 'ruby'},
{text: 'Python', value: 'python'},
{text: 'Java', value: 'java'},
{text: 'C', value: 'c'},
{text: 'C#', value: 'csharp'},
{text: 'C++', value: 'cpp'}
],
toolbar: 'codesample',
// Custom CSS file
codesample_content_css: "http://site.com/material/css/prism.css",
});

И как результат:

Пользовательский пример кода CSS Prism.js TinyMCE

Изменить размеры ввода кода

Вы можете изменить размеры диалогового окна, в котором вы вводите код, изменив codesample_dialog_width а также codesample_dialog_height:

tinymce.init({
selector: 'textarea',
plugins: 'codesample',
codesample_languages: [
{text: 'HTML/XML', value: 'markup'},
{text: 'JavaScript', value: 'javascript'},
{text: 'CSS', value: 'css'},
{text: 'PHP', value: 'php'},
{text: 'Ruby', value: 'ruby'},
{text: 'Python', value: 'python'},
{text: 'Java', value: 'java'},
{text: 'C', value: 'c'},
{text: 'C#', value: 'csharp'},
{text: 'C++', value: 'cpp'}
],
toolbar: 'codesample',
// Custom dimensions
codesample_dialog_height: 400,
codesample_dialog_width: 600
});

Список пользовательских языков

Таким образом, вам не нужно просматривать список поддерживаемых языков Prism, а затем создавать объект с идентификатором и именем языка самостоятельно, мы предоставляем вам список всех поддерживаемых языков Prism.js для использования в codesample_languages собственность TinyMCE:

tinymce.init({
selector: 'textarea',
plugins: 'codesample',
toolbar: 'codesample',
codesample_languages: [
{text:'HTML/XML',value:'markup'},
{text:"XML",value:"xml"},
{text:"HTML",value:"html"},
{text:"mathml",value:"mathml"},
{text:"SVG",value:"svg"},
{text:"CSS",value:"css"},
{text:"Clike",value:"clike"},
{text:"Javascript",value:"javascript"},
{text:"ActionScript",value:"actionscript"},
{text:"apacheconf",value:"apacheconf"},
{text:"apl",value:"apl"},
{text:"applescript",value:"applescript"},
{text:"asciidoc",value:"asciidoc"},
{text:"aspnet",value:"aspnet"},
{text:"autoit",value:"autoit"},
{text:"autohotkey",value:"autohotkey"},
{text:"bash",value:"bash"},
{text:"basic",value:"basic"},
{text:"batch",value:"batch"},
{text:"c",value:"c"},
{text:"brainfuck",value:"brainfuck"},
{text:"bro",value:"bro"},
{text:"bison",value:"bison"},
{text:"C#",value:"csharp"},
{text:"C++",value:"cpp"},
{text:"CoffeeScript",value:"coffeescript"},
{text:"ruby",value:"ruby"},
{text:"d",value:"d"},
{text:"dart",value:"dart"},
{text:"diff",value:"diff"},
{text:"docker",value:"docker"},
{text:"eiffel",value:"eiffel"},
{text:"elixir",value:"elixir"},
{text:"erlang",value:"erlang"},
{text:"fsharp",value:"fsharp"},
{text:"fortran",value:"fortran"},
{text:"git",value:"git"},
{text:"glsl",value:"glsl"},
{text:"go",value:"go"},
{text:"groovy",value:"groovy"},
{text:"haml",value:"haml"},
{text:"handlebars",value:"handlebars"},
{text:"haskell",value:"haskell"},
{text:"haxe",value:"haxe"},
{text:"http",value:"http"},
{text:"icon",value:"icon"},
{text:"inform7",value:"inform7"},
{text:"ini",value:"ini"},
{text:"j",value:"j"},
{text:"jade",value:"jade"},
{text:"java",value:"java"},
{text:"JSON",value:"json"},
{text:"jsonp",value:"jsonp"},
{text:"julia",value:"julia"},
{text:"keyman",value:"keyman"},
{text:"kotlin",value:"kotlin"},
{text:"latex",value:"latex"},
{text:"less",value:"less"},
{text:"lolcode",value:"lolcode"},
{text:"lua",value:"lua"},
{text:"makefile",value:"makefile"},
{text:"markdown",value:"markdown"},
{text:"matlab",value:"matlab"},
{text:"mel",value:"mel"},
{text:"mizar",value:"mizar"},
{text:"monkey",value:"monkey"},
{text:"nasm",value:"nasm"},
{text:"nginx",value:"nginx"},
{text:"nim",value:"nim"},
{text:"nix",value:"nix"},
{text:"nsis",value:"nsis"},
{text:"objectivec",value:"objectivec"},
{text:"ocaml",value:"ocaml"},
{text:"oz",value:"oz"},
{text:"parigp",value:"parigp"},
{text:"parser",value:"parser"},
{text:"pascal",value:"pascal"},
{text:"perl",value:"perl"},
{text:"PHP",value:"php"},
{text:"processing",value:"processing"},
{text:"prolog",value:"prolog"},
{text:"protobuf",value:"protobuf"},
{text:"puppet",value:"puppet"},
{text:"pure",value:"pure"},
{text:"python",value:"python"},
{text:"q",value:"q"},
{text:"qore",value:"qore"},
{text:"r",value:"r"},
{text:"jsx",value:"jsx"},
{text:"rest",value:"rest"},
{text:"rip",value:"rip"},
{text:"roboconf",value:"roboconf"},
{text:"crystal",value:"crystal"},
{text:"rust",value:"rust"},
{text:"sas",value:"sas"},
{text:"sass",value:"sass"},
{text:"scss",value:"scss"},
{text:"scala",value:"scala"},
{text:"scheme",value:"scheme"},
{text:"smalltalk",value:"smalltalk"},
{text:"smarty",value:"smarty"},
{text:"SQL",value:"sql"},
{text:"stylus",value:"stylus"},
{text:"swift",value:"swift"},
{text:"tcl",value:"tcl"},
{text:"textile",value:"textile"},
{text:"twig",value:"twig"},
{text:"TypeScript",value:"typescript"},
{text:"verilog",value:"verilog"},
{text:"vhdl",value:"vhdl"},
{text:"wiki",value:"wiki"},
{text:"YAML",value:"yaml"}
]
});
Ссылка на основную публикацию
Adblock
detector