Why AlpineJS
AlpineJS is a minimalistic JS framework. It is TailwindCSS but for JavaScript. You can create functional applications in HTML without a script tag or new file.
How to create tab of the Markdown Editor
First of all we need to create a new file called index.html with boilerpate and add alpinejs and also import TailwindCSS to the head by the following lines
<script src="https://unpkg.com/alpinejs"></script>
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
So, let's start by creating the tab section First let's add the class overflow-x-hidden to the body so that the horizontal scrollbar doesn't appear. Now let's start with the tab section. Create a div and add x-data which is the data basically needed for AlpineJS and can be used only in the div. So add the following line.
<div x-data="{ body: '', markdown: '', preview(){ this.markdown = window.marked(this.body) } }" class="p-6 w-screen"></div>
Inside the div create the tab div
<div x-data="{ activeTab: 'write' }" -init="activeTab = window.location.hash ? window.location.hash.replace('#', '') : 'write'" class="w-full"></div>
Inside the tab div create the button using nav, ul, li, a tag with TailwindCSS. So add the following code
<nav>
<ul class="flex space-x-4">
<li>
<a @click="activeTab = 'write'" :class="{ 'font-bold': activeTab === 'write' }"
class="bg-amber-500 hover:bg-amber-700 text-white font-bold py-2 px-4 rounded" href="#">
Write
</a>
</li>
<li>
<a @click="activeTab = 'preview'" :class="{ 'font-bold': activeTab === 'preview' }"
class="bg-amber-500 hover:bg-amber-700 text-white font-bold py-2 px-4 rounded" href="#">
Preview
</a>
</li>
</ul>
</nav>
How to make the markdown editor
Now let's start with the markdown editor Let's include the following line in head which will convert the markdown to HTML and display it
<script src="https://cdn.jsdelivr.net/npm/[email protected]/marked.min.js"></script>
Create another div after the nav with class of py-6 and w-full Inside that div add the following lines which will show only when write tab is selected and have the textarea which will automatically compile when text is changed
<div x-show="activeTab === 'write'">
<div>
<textarea title="content" class="min-w-md border border-amber-500 rounded-md px-2 py-1 w-full h-96"
x-model="body" x-on:input.change="preview"></textarea>
</div>
</div>
After that add preview area which will show the HTML output
<div x-show="activeTab === 'preview'" class="w-full">
<div x-html="markdown" class="preview prose max-w-none prose-img:rounded-md">
</div>
</div>
And there we go we have successfully created markdown editor so the final code is
View Website
View Website
View Website
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/alpinejs"></script>
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/marked.min.js"></script>
</head>
<body class="overflow-x-hidden">
<div x-data="{ body: '', markdown: '', preview(){ this.markdown = window.marked(this.body) } }"
class="p-6 w-screen">
<div x-data="{ activeTab: 'write' }"
x-init="activeTab = window.location.hash ? window.location.hash.replace('#', '') : 'write'" class="w-full">
<nav>
<ul class="flex space-x-4">
<li>
<a @click="activeTab = 'write'" :class="{ 'font-bold': activeTab === 'write' }"
class="bg-amber-500 hover:bg-amber-700 text-white font-bold py-2 px-4 rounded" href="#">
Write
</a>
</li>
<li>
<a @click="activeTab = 'preview'" :class="{ 'font-bold': activeTab === 'preview' }"
class="bg-amber-500 hover:bg-amber-700 text-white font-bold py-2 px-4 rounded" href="#">
Preview
</a>
</li>
</ul>
</nav>
<div class="py-6 w-full">
<div x-show="activeTab === 'write'">
<div>
<textarea title="content" class="min-w-md border border-amber-500 rounded-md px-2 py-1 w-full h-96"
x-model="body" x-on:input.change="preview"></textarea>
</div>
</div>
<div x-show="activeTab === 'preview'" class="w-full">
<div x-html="markdown" class="preview prose max-w-none prose-img:rounded-md">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Comments (2)