AIメーカー

チャットAIを作れる、AIと遊べる
powered by ONJ.open2ch
トップに戻る

!aiにプログラミングさせてみるスレ

ソース:http://hayabusa.open2ch.net/test/read.cgi/livejupiter/1681083402/
open2chさん 2023-04-10 08:36:42
概要を見る AIとチャット36
一覧に戻る
表示範囲:
A:以下は、HTML、CSS、JavaScriptを使ってMarkdownエディタを作成するサンプルコードです。Markdownエディタとしての機能を実装していますが、完全なMarkdown解析やエディタ機能は省略しています。また、このサンプルはあくまで基本的な仕組みを説明するためのもので、簡易的な実装に留めてあります。実際に運用する際には、十分な対策を施す必要があります。

まず、エディタに格納するためのデータを用意します。ここでは、ブラウザのローカルストレージを使用します。ローカルストレージは、ブラウザにデータを保存することができる機能です。

次に、MarkdownエディタページのHTMLを作成します。以下は、エディタ、プレビュー表示部、そして保存ボタンのHTMLの例です。ここでは、Markdownのコードを入力するためのテキストエリアを用意しています。

```html
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Markdownエディタ</title>
<style>
.input {
margin: 5px 0;
width: 80%;
height: 300px;
}
.output {
margin: 5px 0;
width: 80%;
height: 300px;
white-space: pre-wrap;
}
.button {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border-radius: 4px;
border: 1px solid # dcdcdc;
background-color: # f5f5f5;
color: # 333;
text-decoration: none;
}
.button-primary {
background-color: # 007fff;
color: # fff;
border: 1px solid # 007fff;
}
</style>
</head>
<body>
<h1>Markdownエディタ</h1>
<textarea class="input" id="input"></textarea>
<button type="button" class="button button-primary" onclick="preview()">プレビュー</button>
<button type="button" class="button button-primary" onclick="save()">保存</button>
<br>
<h2>プレビュー</h2>
<div class="output" id="output"></div>
<script src="main.js"></script>
</body>
</html>
```

Markdownのコードを入力するためのテキストエリアと、プレビュー表示用のdivタグが用意されています。また、プレビューボタンを押すことで、MarkdownコードをHTMLに変換し、プレビュー表示を更新します。保存ボタンを押すことで、このMarkdownコードを保存します。

Markdownエディタページに対応するJavaScriptコードを作成します。ここでは、MarkdownのコードをHTMLに変換する `marked.js` と、プレビュー表示の更新、及びMarkdownコードの保存を行う `main.js` を作成します。

```javascript
// marked.js
var renderer = new marked.Renderer();
renderer.table = function(header, body) {
return '<table class="table table-bordered">\n'
+ '<thead>\n'
+ header
+ '</thead>\n'
+ '<tbody>\n'
+ body
+ '</tbody>\n'
+ '</table>\n';
};
marked.setOptions({
renderer: renderer,
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: true,
smartLists: true,
smartypants: false
});

// main.js
var input = document.getElementById('input');
var output = document.getElementById('
2023-04-10 21:39:30 10カ月前