コードコピー機能のデモ
• 約3分
コードコピー機能のデモ
このページでは、コードブロックにコピーボタンが自動的に追加されることを実演します。
JavaScript の例
const greeting = "Hello, World!";
console.log(greeting);
function add(a, b) {
return a + b;
}
console.log(add(5, 3)); // 8右上のコピーボタンをクリックすると、コードがクリップボードにコピーされます！
TypeScript の例
interface User {
id: number;
name: string;
email: string;
}
const user: User = {
id: 1,
name: "John Doe",
email: "john@example.com",
};
function greetUser(user: User): string {
return `Hello, ${user.name}!`;
}
console.log(greetUser(user));Python の例
def fibonacci(n):
if n <= 1:
return n
return fibonacci(n - 1) + fibonacci(n - 2)
for i in range(10):
print(f"fibonacci({i}) = {fibonacci(i)}")長いコード例
import { defineConfig } from "astro/config";
import mdx from "@astrojs/mdx";
import sitemap from "@astrojs/sitemap";
import tailwind from "@astrojs/tailwind";
import react from "@astrojs/react";
export default defineConfig({
site: "https://example.com",
integrations: [
tailwind({
applyBaseStyles: false,
}),
react(),
mdx(),
sitemap(),
],
markdown: {
shikiConfig: {
theme: "github-dark",
wrap: true,
},
},
});複数言語の例
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>CSS
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
border: none;
cursor: pointer;
transition: transform 0.2s;
}
.button:hover {
transform: translateY(-2px);
}使い方
- コードブロックの右上にマウスをホバー
- コピーアイコンが表示される
- クリックするとコードがクリップボードにコピーされる
- チェックマークが表示され、2秒後に元に戻る
すべてのコードブロックで自動的に機能します！