Использование Prism.js для подсветки синтаксиса кода на PHP и Markdown

Напиши функцию на php для перевода markdown в html, для вывода в bootstrap верстке

Для того чтобы преобразовать Markdown в HTML в PHP, вы можете использовать библиотеку parsedown. Это популярная библиотека, которая легко интегрируется в ваш проект.

Вот пример функции, которая принимает строку в формате Markdown и возвращает преобразованный HTML:

  1. Установите библиотеку parsedown, если она еще не установлена. Можно использовать Composer, добавив следующую строку в файл composer.json, или выполнить команду в терминале:
composer require erusev/parsedown
  1. Создайте функцию для конвертации Markdown в HTML:
require 'vendor/autoload.php'; // Убедитесь, что указываете правильный путь к autoload

function markdownToHtml($markdown) {
    $parsedown = new Parsedown();
    $html = $parsedown->text($markdown);

    // Оборачиваем в Bootstrap контейнер
    return '<div class="container"><div class="row"><div class="col-md-12">' . $html . '</div></div></div>';
}

// Пример использования
$markdownText = "# Заголовок\n\nЭто пример текста с **жирным** и *курсивом*.";
$htmlOutput = markdownToHtml($markdownText);
echo $htmlOutput;
  1. В данном коде выполняется следующее:
    • Используется Parsedown для преобразования Markdown в HTML.
    • Полученный HTML оборачивается в контейнер Bootstrap для стилизации и структурирования.

Этот код можно добавить в ваш существующий проект на PHP, и он будет корректно обрабатывать текст в формате Markdown, а потом отображать его с помощью стилей Bootstrap. Убедитесь, что на странице подключены стили Bootstrap, чтобы результат выглядел корректно.

Как подключить класс если я не использую composer?

Если вы не используете Composer для управления зависимостями, вы можете подключить класс Parsedown вручную. Для этого есть несколько способов:

  1. Скачать Parsedown вручную:

    • Перейдите на страницу Parsedown на GitHub и загрузите архив с исходным кодом.
    • Извлеките файлы из архива и переместите файл Parsedown.php в вашу папку проекта, например, в папку lib или в корневую директорию.

  2. Подключить класс в вашем скрипте: После того как вы положили Parsedown.php в ваше приложение, вы можете подключить его с помощью require:

// Предположим, что вы положили файл Parsedown.php в папку 'lib'
require 'lib/Parsedown.php';

function markdownToHtml($markdown) {
    $parsedown = new Parsedown();
    $html = $parsedown->text($markdown);

    // Оборачиваем в Bootstrap контейнер
    return '<div class="container"><div class="row"><div class="col-md-12">' . $html . '</div></div></div>';
}

// Пример использования
$markdownText = "# Заголовок\n\nЭто пример текста с **жирным** и *курсивом*.";
$htmlOutput = markdownToHtml($markdownText);
echo $htmlOutput;

Объяснение:

  • В данном примере require 'lib/Parsedown.php'; подключает класс Parsedown.
  • Теперь вы можете использовать этот класс в своей функции для преобразования Markdown в HTML, как и в примере выше.

Важно:

При использовании данного метода убедитесь, что вы правильно указываете путь к файлу Parsedown.php. Путь может отличаться в зависимости от вашей структуры каталогов.

Какой библиотекой я смогу подсветить синтаксис на странице?

Для подсветки синтаксиса на веб-странице можно использовать несколько популярных библиотек. Вот три наиболее распространенные:

1. Prism.js

Prism.js — это библиотека для подсветки синтаксиса, которая легка в использовании и имеет множество плагинов и тем.

Как использовать Prism.js:

  • Подключите CSS и JavaScript файлы Prism.js в вашем HTML:
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.0/themes/prism.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.0/prism.min.js"></script>
  • Оберните код, который хотите подсветить, в теги <pre> и <code> с указанием языка:
<pre><code class="language-php">
<?php
echo "Hello, World!";
?>
</code></pre>

2. Highlight.js

Highlight.js — еще одна популярная библиотека для подсветки синтаксиса, поддерживающая множество языков программирования.

Как использовать Highlight.js:

  • Подключите CSS и JavaScript файлы Highlight.js в вашем HTML:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
  • Используйте теги <pre> и <code>, указывая язык:
<pre><code class="php">
<?php
echo "Hello, World!";
?>
</code></pre>

3. Codeshare.io

Если вам не требуется полностью интегрированная библиотека, вы также можете использовать онлайн-сервисы, такие как Codeshare.io, которые предлагают подсветку синтаксиса для совместного редактирования кода.

Пример интеграции библиотеки в PHP:

Если вы используете одну из этих библиотек в вашем проекте, вы можете легко интегрировать ее в вывод HTML из вашего PHP-кода. Вот пример:

require 'lib/Parsedown.php';

function markdownToHtml($markdown) {
    $parsedown = new Parsedown();
    $html = $parsedown->text($markdown);

    // Оборачиваем в Bootstrap и добавляем подсветку
    return '<div class="container"><div class="row"><div class="col-md-12">' . $html . '</div></div></div>';
}

// Пример использования
$markdownText = "```php\n<?php\necho 'Hello, World!';\n?>\n```";
$htmlOutput = markdownToHtml($markdownText);
echo $htmlOutput;

Не забудьте подключить и настроить выбранную библиотеку для подсветки вместе с вашим Markdown текстом!

Можно ли через Prism.js разукрасить код? У меня сейчас меняется только текст

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

1. Подключение библиотеки

Убедитесь, что вы правильно подключили библиотеку Prism.js. Вот пример, как это можно сделать в HTML:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Подсветка синтаксиса с Prism.js</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.0/themes/prism.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.0/prism.min.js"></script>
</head>
<body>

<div class="container">
    <h1>Пример подсветки кода</h1>
    <pre><code class="language-php">
<?php
echo "Hello, World!";
?>
    </code></pre>
</div>

</body>
</html>

2. Правильное оформление

Убедитесь, что вы используете правильные теги и классы:

  • Код должен быть обернут в теги <pre> и <code>.
  • Класс language-php (или любой другой язык) должен быть добавлен к тегу <code>.

3. Проверка JavaScript

Убедитесь, что у вас есть следующий скрипт внизу вашего HTML для инициализации Prism:

<script>Prism.highlightAll();</script>

4. Пример с разными языками

Вот пример кода на странице с несколькими языками:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Подсветка синтаксиса с Prism.js</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.0/themes/prism.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.0/prism.min.js"></script>
</head>
<body>

<div class="container">
    <h1>Пример подсветки кода</h1>

    <h2>PHP код:</h2>
    <pre><code class="language-php">
<?php
echo "Hello, World!";
?>
    </code></pre>

    <h2>JavaScript код:</h2>
    <pre><code class="language-javascript">
const greeting = "Hello, World!";
console.log(greeting);
    </code></pre>
</div>

<script>Prism.highlightAll();</script>

</body>
</html>

5. Дополнительные темы

Если вы хотите изменить стиль подсветки кода, вы можете попробовать другие темы, доступные на сайте Prism.js. Просто замените CSS файл на нужный вам.

Заключение

После выполнения всех этих шагов ваш код должен корректно подсвечиваться. Если проблема сохраняется, убедитесь, что нет конфликтов с другими JavaScript или CSS файлами на вашей странице.

Опубликовано 17.05.2025 13:53:52