<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown Website Example</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
#editor,
#preview {
width: 50%;
height: 90%;
overflow-y: scroll;
padding: 20px;
font-family: Arial, sans-serif;
}
#editor {
border-right: 1px solid #ccc;
}
#preview {
background-color: white;
}
</style>
</head>
<body>
<div id="editor"></div>
<div id="preview"></div>
<script src="https://cdn.jsdelivr.net/npm/showdown@1.9.1/dist/showdown.min.js"></script>
<script>
const editor = document.getElementById('editor');
const preview = document.getElementById('preview');
let converter = new showdown.Converter();
function updatePreview() {
let markdownText = editor.value;
let html = converter.makeHtml(markdownText);
preview.innerHTML = html;
}
editor.addEventListener('input', updatePreview);
// Начальное значение редактора
editor.value = `# Привет, мир!
Это простой пример использования **Markdown** на вашем сайте.
## Список возможностей:
- Создание заголовков
- Форматирование текста (*курсив*, **жирный**, ~~перечеркнутый~~)
- Списки (маркированные и нумерованные)
- Вставка изображений и ссылок
- Кодовые блоки и цитаты
---
### Пример кода:
\`\`\`
console.log("Hello, World!");
\`\`\`
---
#### Используйте Markdown для легкого создания контента!`;
// Обновляем превью сразу после загрузки страницы
updatePreview();
</script>
</body>
</html>