फेंस्ड कोड ब्लॉक
फेंस्ड कोड ब्लॉक Markdown के विस्तारित सिंटैक्स की एक महत्वपूर्ण सुविधा हैं, जो मूल कोड ब्लॉकों की तुलना में अधिक शक्तिशाली कोड प्रदर्शन क्षमताएँ प्रदान करती हैं, जिसमें सिंटैक्स हाइलाइटिंग, पंक्ति संख्याएँ, फाइल नाम और अन्य उन्नत सुविधाएँ शामिल हैं।
मूल फेंस्ड कोड ब्लॉक
तीन बैकटिक्स
तीन बैकटिक्स ``` का उपयोग करके एक कोड ब्लॉक बनाएँ:
```
function hello() {
console.log("Hello, World!");
}
```रेंडर्ड आउटपुट:
function hello() {
console.log("Hello, World!");
}तीन टिल्डे
आप तीन टिल्डे ~~~ का उपयोग करके भी कोड ब्लॉक बना सकते हैं:
~~~
function hello() {
console.log("Hello, World!");
}
~~~रेंडर्ड आउटपुट:
function hello() {
console.log("Hello, World!");
}सिंटैक्स हाइलाइटिंग
प्रोग्रामिंग भाषा निर्दिष्ट करना
सिंटैक्स हाइलाइटिंग सक्षम करने के लिए खोलने वाले मार्कर के बाद भाषा नाम निर्दिष्ट करें:
```javascript
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
console.log(fibonacci(10)); // 55
```रेंडर्ड आउटपुट:
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
console.log(fibonacci(10)); // 55सामान्य भाषा उदाहरण
Python
```python
def quicksort(arr):
if len(arr) <= 1:
return arr
pivot = arr[len(arr) // 2]
left = [x for x in arr if x < pivot]
middle = [x for x in arr if x == pivot]
right = [x for x in arr if x > pivot]
return quicksort(left) + middle + quicksort(right)
# Example usage
numbers = [3, 6, 8, 10, 1, 2, 1]
print(quicksort(numbers))
```रेंडर्ड आउटपुट:
def quicksort(arr):
if len(arr) <= 1:
return arr
pivot = arr[len(arr) // 2]
left = [x for x in arr if x < pivot]
middle = [x for x in arr if x == pivot]
right = [x for x in arr if x > pivot]
return quicksort(left) + middle + quicksort(right)
# Example usage
numbers = [3, 6, 8, 10, 1, 2, 1]
print(quicksort(numbers))TypeScript
```typescript
interface User {
id: number;
name: string;
email: string;
isActive: boolean;
}
class UserService {
private users: User[] = [];
async createUser(userData: Omit<User, 'id'>): Promise<User> {
const newUser: User = {
id: Date.now(),
...userData
};
this.users.push(newUser);
return newUser;
}
async getUserById(id: number): Promise<User | undefined> {
return this.users.find(user => user.id === id);
}
}
```रेंडर्ड आउटपुट:
interface User {
id: number;
name: string;
email: string;
isActive: boolean;
}
class UserService {
private users: User[] = [];
async createUser(userData: Omit<User, 'id'>): Promise<User> {
const newUser: User = {
id: Date.now(),
...userData
};
this.users.push(newUser);
return newUser;
}
async getUserById(id: number): Promise<User | undefined> {
return this.users.find(user => user.id === id);
}
}Go
```go
package main
import (
"fmt"
"net/http"
"log"
)
type Server struct {
port string
}
func NewServer(port string) *Server {
return &Server{port: port}
}
func (s *Server) Start() error {
http.HandleFunc("/", s.handleHome)
http.HandleFunc("/api/health", s.handleHealth)
fmt.Printf("Server starting on port %s\n", s.port)
return http.ListenAndServe(":"+s.port, nil)
}
func (s *Server) handleHome(w http.ResponseWriter, r *http.Request) {
fmt.Fprintf(w, "Welcome to Go Server!")
}
func (s *Server) handleHealth(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "application/json")
fmt.Fprintf(w, `{"status": "healthy"}`)
}
func main() {
server := NewServer("8080")
log.Fatal(server.Start())
}
```रेंडर्ड आउटपुट:
package main
import (
"fmt"
"net/http"
"log"
)
type Server struct {
port string
}
func NewServer(port string) *Server {
return &Server{port: port}
}
func (s *Server) Start() error {
http.HandleFunc("/", s.handleHome)
http.HandleFunc("/api/health", s.handleHealth)
fmt.Printf("Server starting on port %s\n", s.port)
return http.ListenAndServe(":"+s.port, nil)
}
func (s *Server) handleHome(w http.ResponseWriter, r *http.Request) {
fmt.Fprintf(w, "Welcome to Go Server!")
}
func (s *Server) handleHealth(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "application/json")
fmt.Fprintf(w, `{"status": "healthy"}`)
}
func main() {
server := NewServer("8080")
log.Fatal(server.Start())
}उन्नत सुविधाएँ
पंक्ति हाइलाइटिंग
कुछ Markdown प्रोसेसर विशिष्ट पंक्तियों को हाइलाइट करने समर्थन करते हैं:
```javascript {2,4-6}
function calculateTotal(items) {
let total = 0; // यह पंक्ति हाइलाइट की गई है
for (const item of items) { // ये पंक्तियाँ हाइलाइट की गई हैं
total += item.price * item.quantity;
} // हाइलाइट समाप्त
return total;
}
```पंक्ति संख्याएँ दिखाएँ
कोड पंक्ति संख्याएँ प्रदर्शित करें:
```python:line-numbers
def binary_search(arr, target):
left, right = 0, len(arr) - 1
while left <= right:
mid = (left + right) // 2
if arr[mid] == target:
return mid
elif arr[mid] < target:
left = mid + 1
else:
right = mid - 1
return -1
```फाइल नाम शीर्षक
कोड फाइल नाम प्रदर्शित करें:
```typescript title="userService.ts"
export class UserService {
private apiUrl = '/api/users';
async getUsers(): Promise<User[]> {
const response = await fetch(this.apiUrl);
return response.json();
}
async createUser(user: CreateUserDto): Promise<User> {
const response = await fetch(this.apiUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(user)
});
return response.json();
}
}
```कोड ब्लॉक डिफ़ प्रदर्शन
कोड परिवर्तन दिखाएँ:
```diff
function calculateTax(amount) {
- return amount * 0.05; // पुराना टैक्स दर
+ return amount * 0.08; // नया टैक्स दर
}
+ // नया फंक्शन
+ function calculateDiscount(amount, percentage) {
+ return amount * (percentage / 100);
+ }
```रेंडर्ड आउटपुट:
function calculateTax(amount) {
- return amount * 0.05; // पुराना टैक्स दर
+ return amount * 0.08; // नया टैक्स दर
}
+ // नया फंक्शन
+ function calculateDiscount(amount, percentage) {
+ return amount * (percentage / 100);
+ }कॉन्फ़िगरेशन फाइल उदाहरण
JSON कॉन्फ़िगरेशन
```json
{
"name": "my-app",
"version": "1.0.0",
"scripts": {
"start": "node server.js",
"dev": "nodemon server.js",
"build": "webpack --mode production",
"test": "jest"
},
"dependencies": {
"express": "^4.18.2",
"mongoose": "^7.0.3",
"jsonwebtoken": "^9.0.0"
},
"devDependencies": {
"nodemon": "^2.0.22",
"jest": "^29.5.0",
"webpack": "^5.82.0"
}
}
```रेंडर्ड आउटपुट:
{
"name": "my-app",
"version": "1.0.0",
"scripts": {
"start": "node server.js",
"dev": "nodemon server.js",
"build": "webpack --mode production",
"test": "jest"
},
"dependencies": {
"express": "^4.18.2",
"mongoose": "^7.0.3",
"jsonwebtoken": "^9.0.0"
},
"devDependencies": {
"nodemon": "^2.0.22",
"jest": "^29.5.0",
"webpack": "^5.82.0"
}
}YAML कॉन्फ़िगरेशन
```yaml
apiVersion: apps/v1
kind: Deployment
metadata:
name: web-app
labels:
app: web-app
spec:
replicas: 3
selector:
matchLabels:
app: web-app
template:
metadata:
labels:
app: web-app
spec:
containers:
- name: web
image: nginx:1.21
ports:
- containerPort: 80
env:
- name: NODE_ENV
value: production
resources:
requests:
memory: "64Mi"
cpu: "250m"
limits:
memory: "128Mi"
cpu: "500m"
```रेंडर्ड आउटपुट:
apiVersion: apps/v1
kind: Deployment
metadata:
name: web-app
labels:
app: web-app
spec:
replicas: 3
selector:
matchLabels:
app: web-app
template:
metadata:
labels:
app: web-app
spec:
containers:
- name: web
image: nginx:1.21
ports:
- containerPort: 80
env:
- name: NODE_ENV
value: production
resources:
requests:
memory: "64Mi"
cpu: "250m"
limits:
memory: "128Mi"
cpu: "500m"SQL क्वेरी
```sql
-- users तालिका बनाएँ
CREATE TABLE users (
id SERIAL PRIMARY KEY,
username VARCHAR(50) UNIQUE NOT NULL,
email VARCHAR(100) UNIQUE NOT NULL,
password_hash VARCHAR(255) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
-- इंडेक्स बनाएँ
CREATE INDEX idx_users_email ON users(email);
CREATE INDEX idx_users_username ON users(username);
-- सक्रिय उपयोगकर्ताओं को क्वेरी करें
SELECT
u.id,
u.username,
u.email,
COUNT(p.id) as post_count
FROM users u
LEFT JOIN posts p ON u.id = p.user_id
WHERE u.created_at >= NOW() - INTERVAL '30 days'
GROUP BY u.id, u.username, u.email
HAVING COUNT(p.id) > 0
ORDER BY post_count DESC
LIMIT 10;
```रेंडर्ड आउटपुट:
-- users तालिका बनाएँ
CREATE TABLE users (
id SERIAL PRIMARY KEY,
username VARCHAR(50) UNIQUE NOT NULL,
email VARCHAR(100) UNIQUE NOT NULL,
password_hash VARCHAR(255) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
-- इंडेक्स बनाएँ
CREATE INDEX idx_users_email ON users(email);
CREATE INDEX idx_users_username ON users(username);
-- सक्रिय उपयोगकर्ताओं को क्वेरी करें
SELECT
u.id,
u.username,
u.email,
COUNT(p.id) as post_count
FROM users u
LEFT JOIN posts p ON u.id = p.user_id
WHERE u.created_at >= NOW() - INTERVAL '30 days'
GROUP BY u.id, u.username, u.email
HAVING COUNT(p.id) > 0
ORDER BY post_count DESC
LIMIT 10;शेल स्क्रिप्ट और कमांड
Bash स्क्रिप्ट
```bash
#!/bin/bash
# डिप्लॉयमेंट स्क्रिप्ट
set -e
APP_NAME="my-app"
DEPLOY_DIR="/var/www/${APP_NAME}"
BACKUP_DIR="/var/backups/${APP_NAME}"
CURRENT_DATE=$(date +%Y%m%d_%H%M%S)
echo "Starting deployment of ${APP_NAME}..."
# बैकअप बनाएँ
if [ -d "$DEPLOY_DIR" ]; then
echo "Creating backup at ${BACKUP_DIR}/${CURRENT_DATE}"
mkdir -p "$BACKUP_DIR"
cp -r "$DEPLOY_DIR" "${BACKUP_DIR}/${CURRENT_DATE}"
fi
# सेवा रोकें
echo "Stopping service..."
sudo systemctl stop $APP_NAME || true
# नया संस्करण डिप्लॉय करें
echo "Deploying new version..."
rm -rf "$DEPLOY_DIR"
mkdir -p "$DEPLOY_DIR"
tar -xzf "${APP_NAME}.tar.gz" -C "$DEPLOY_DIR"
# निर्भरताएँ इंस्टॉल करें
echo "Installing dependencies..."
cd "$DEPLOY_DIR"
npm ci --production
# सेवा शुरू करें
echo "Starting service..."
sudo systemctl start $APP_NAME
sudo systemctl enable $APP_NAME
echo "Deployment complete!"
```रेंडर्ड आउटपुट:
#!/bin/bash
# डिप्लॉयमेंट स्क्रिप्ट
set -e
APP_NAME="my-app"
DEPLOY_DIR="/var/www/${APP_NAME}"
BACKUP_DIR="/var/backups/${APP_NAME}"
CURRENT_DATE=$(date +%Y%m%d_%H%M%S)
echo "Starting deployment of ${APP_NAME}..."
# बैकअप बनाएँ
if [ -d "$DEPLOY_DIR" ]; then
echo "Creating backup at ${BACKUP_DIR}/${CURRENT_DATE}"
mkdir -p "$BACKUP_DIR"
cp -r "$DEPLOY_DIR" "${BACKUP_DIR}/${CURRENT_DATE}"
fi
# सेवा रोकें
echo "Stopping service..."
sudo systemctl stop $APP_NAME || true
# नया संस्करण डिप्लॉय करें
echo "Deploying new version..."
rm -rf "$DEPLOY_DIR"
mkdir -p "$DEPLOY_DIR"
tar -xzf "${APP_NAME}.tar.gz" -C "$DEPLOY_DIR"
# निर्भरताएँ इंस्टॉल करें
echo "Installing dependencies..."
cd "$DEPLOY_DIR"
npm ci --production
# सेवा शुरू करें
echo "Starting service..."
sudo systemctl start $APP_NAME
sudo systemctl enable $APP_NAME
echo "Deployment complete!"सामान्य त्रुटियाँ और समाधान
1. बैकटिक्स की असंगत संख्या
❌ त्रुटि:
```javascript
function hello() {
console.log("Hello");
}
`` ← केवल दो बैकटिक्स
✅ सही:
```javascript
function hello() {
console.log("Hello");
}
``` ← तीन बैकटिक्स2. गलत भाषा पहचानकर्ता
❌ त्रुटि:
```js ← कुछ प्रोसेसर पहचान नहीं करते
function hello() {}
```
✅ अनुशंसित:
```javascript ← पूर्ण नाम उपयोग करें
function hello() {}
```3. नेस्टेड कोड ब्लॉक
❌ समस्या: ``` शामिल कोड प्रदर्शित नहीं कर सकते
✅ समाधान: तीन बैकटिक्स को लपेटने के लिए चार बैकटिक्स उपयोग करें
````markdown
```javascript
console.log("hello");
```
### 4. विशेष वर्ण संभालना
````markdown
```markdown
<!-- markdown कोड ब्लॉक में markdown सिंटैक्स प्रदर्शित करें -->
\```javascript ← बैकटिक्स को एस्केप करें
code here
\```
```समर्थित भाषाओं की सूची
प्रोग्रामिंग भाषाएँ
| Language | Identifier | Alias |
|---|---|---|
| JavaScript | javascript | js |
| TypeScript | typescript | ts |
| Python | python | py |
| Java | java | |
| C++ | cpp | c++, cxx |
| C# | csharp | cs |
| Go | go | golang |
| Rust | rust | rs |
| PHP | php | |
| Ruby | ruby | rb |
| Swift | swift | |
| Kotlin | kotlin | kt |
मार्कअप और कॉन्फ़िगरेशन भाषाएँ
| Language | Identifier | Usage |
|---|---|---|
| HTML | html | वेब मार्कअप |
| CSS | css | स्टाइलशीट |
| XML | xml | डेटा विनिमय |
| JSON | json | डेटा फॉर्मेट |
| YAML | yaml, yml | कॉन्फ़िगरेशन फाइल |
| TOML | toml | कॉन्फ़िगरेशन फाइल |
| Markdown | markdown, md | दस्तावेज़ीकरण |
डेटा और क्वेरी भाषाएँ
| Language | Identifier | Usage |
|---|---|---|
| SQL | sql | डेटाबेस क्वेरी |
| GraphQL | graphql | API क्वेरी |
| R | r | सांख्यिकीय कम्प्यूटिंग |
| MATLAB | matlab | संख्यात्मक कम्प्यूटिंग |
शेल और स्क्रिप्ट
| Language | Identifier | Usage |
|---|---|---|
| Bash | bash, sh | Unix शेल |
| PowerShell | powershell, ps1 | Windows शेल |
| Batch | batch, bat | Windows बैच |
| Dockerfile | dockerfile | कंटेनर कॉन्फ़िगरेशन |
सर्वोत्तम प्रथाएँ
1. उचित भाषा पहचानकर्ता चुनें
✅ अनुशंसित: सटीक भाषा पहचानकर्ता उपयोग करें
```typescript
interface User {
id: number;
name: string;
}
```
❌ अनुशंसित नहीं: गलत पहचानकर्ता उपयोग करें
```javascript ← यह TypeScript कोड है
interface User {
id: number;
name: string;
}
```2. अर्थपूर्ण टिप्पणियाँ जोड़ें
✅ अनुशंसित: व्याख्यात्मक टिप्पणियाँ शामिल करें
```python
def fibonacci(n):
"""nवें फिबोनाची संख्या की गणना करें"""
if n <= 1:
return n
return fibonacci(n-1) + fibonacci(n-2)
```
❌ अनुशंसित नहीं: स्पष्टीकरण के बिना कोड
```python
def fib(n):
if n <= 1:
return n
return fib(n-1) + fib(n-2)
```3. कोड को संक्षिप्त रखें
✅ अनुशंसित: कोर लॉजिक दिखाएँ
```javascript
// उपयोगकर्ता प्रमाणीकरण मिडलवेयर
function authenticate(req, res, next) {
const token = req.headers.authorization;
if (!token) {
return res.status(401).json({ error: 'No token provided' });
}
// सत्यापन लॉजिक...
next();
}
```
❌ अनुशंसित नहीं: बहुत अधिक अप्रासंगिक कोड
```javascript
// बहुत सारा अप्रासंगिक कोड छोड़ा गया...
```4. फाइल नाम शीर्षक उपयोग करें
✅ अनुशंसित: फाइल नाम दिखाएँ
```javascript title="middleware/auth.js"
export function authenticate(req, res, next) {
// प्रमाणीकरण लॉजिक
}
```
✅ अनुशंसित: कॉन्फ़िग फाइल नाम दिखाएँ
```json title="package.json"
{
"name": "my-app",
"version": "1.0.0"
}
```व्यावहारिक अनुप्रयोग परिदृश्य
1. API दस्तावेज़ीकरण
## उपयोगकर्ता लॉगिन API
**रिप्लेस उदाहरण:**
```bash
curl -X POST https://api.example.com/auth/login \
-H "Content-Type: application/json" \
-d '{
"email": "user@example.com",
"password": "password123"
}'
```
**रिस्पॉन्स उदाहरण:**
```json
{
"success": true,
"data": {
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
"user": {
"id": 1,
"email": "user@example.com",
"name": "Zhang San"
}
}
}
```
**त्रुटि रिस्पॉन्स:**
```json
{
"success": false,
"error": {
"code": "INVALID_CREDENTIALS",
"message": "Invalid email or password"
}
}
```2. स्थापना गाइड
## पर्यावरण सेटअप
### 1. Node.js इंस्टॉल करें
**macOS (Homebrew का उपयोग करके):**
```bash
# Homebrew इंस्टॉल करें (यदि पहले से इंस्टॉल नहीं है)
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# Node.js इंस्टॉल करें
brew install node
# स्थापना सत्यापित करें
node --version
npm --version
```
**Ubuntu/Debian:**
```bash
# पैकेज सूची अपडेट करें
sudo apt update
# Node.js और npm इंस्टॉल करें
sudo apt install nodejs npm
# स्थापना सत्यापित करें
node --version
npm --version
```
**Windows (Chocolatey का उपयोग करके):**
```powershell
# Chocolatey इंस्टॉल करें (एडमिनिस्ट्रेटर के रूप में चलाएँ)
Set-ExecutionPolicy Bypass -Scope Process -Force;
[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072;
iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
# Node.js इंस्टॉल करें
choco install nodejs
# स्थापना सत्यापित करें
node --version
npm --version
```3. कोड तुलना
## रिफैक्टरिंग से पहले और बाद
**पहले (कॉलबैक हेल):**
```javascript
function getUserData(userId, callback) {
getUser(userId, function(err, user) {
if (err) {
callback(err);
return;
}
getPosts(user.id, function(err, posts) {
if (err) {
callback(err);
return;
}
getComments(posts[0].id, function(err, comments) {
if (err) {
callback(err);
return;
}
callback(null, { user, posts, comments });
});
});
});
}
```
**बाद (async/await):**
```javascript
async function getUserData(userId) {
try {
const user = await getUser(userId);
const posts = await getPosts(user.id);
const comments = await getComments(posts[0].id);
return { user, posts, comments };
} catch (error) {
throw error;
}
}
```HTML आउटपुट
फेंस्ड कोड ब्लॉक HTML में परिवर्तित होते हैं:
```javascript
function hello() {
console.log("Hello");
}
```परिवर्तित होता है:
<pre><code class="language-javascript">
function hello() {
console.log("Hello");
}
</code></pre>संबंधित सिंटैक्स
- मूल कोड सिंटैक्स - इनलाइन कोड और मूल कोड ब्लॉक
- HTML सिंटैक्स - HTML वृद्धियाँ
- विस्तारित सिंटैक्स अवलोकन - अन्य विस्तार सुविधाएँ
अभ्यास
निम्नलिखित कोड ब्लॉक बनाने का प्रयास करें:
- कई प्रोग्रामिंग भाषाओं में कोड उदाहरणों का संग्रह
- एक पूर्ण API उपयोग ट्यूटोरियल (रिप्लेस और रिस्पॉन्स सहित)
- एक डिप्लॉयमेंट स्क्रिप्ट दस्तावेज़ीकरण
- डेटाबेस डिज़ाइन के लिए एक SQL स्क्रिप्ट
टूल और प्लगइन
सिंटैक्स हाइलाइटिंग लाइब्रेरी
- Prism.js: हल्का सिंटैक्स हाइलाइटिंग
- highlight.js: सुविधा-समृद्ध हाइलाइटिंग लाइब्रेरी
- CodeMirror: ऑनलाइन कोड संपादक
- Monaco Editor: VS Code संपादक का कोर
Markdown प्रोसेसर
- markdown-it: विस्तार योग्य Markdown पार्सर
- remark: एकीकृत Markdown प्रोसेसर
- marked: तेज़ Markdown पार्सर
- gray-matter: फ्रंट मैटर पार्सर
संपादक प्लगइन
- VS Code: Markdown Preview Enhanced
- Sublime Text: MarkdownEditing
- Atom: markdown-preview-plus
- Vim: vim-markdown