RubyOnRails एप्लिकेशन में मार्कडाउन मार्कअप

रेल पर रूबी में लिखी गई एक नई परियोजना में, कार्य को उपयोगकर्ता को पाठ को प्रारूपित करने के लिए मार्कडाउन मार्कअप का उपयोग करने में सक्षम करने के लिए निर्धारित किया गया था। एक कार्यान्वयन विकल्प इस लेख में वर्णित है।

इस लेख में रेलों पर माणिक की मूल बातों का वर्णन नहीं किया गया है। मेरा मतलब है, पाठक एक परियोजना बना सकता है और इसे अपने पसंदीदा आईडीई में / कंसोल से / जैसे भी चला सकता है। साथ ही, लेख के अंत में डेमो प्रोजेक्ट के स्रोतों के लिए एक लिंक है।
एक स्पष्टीकरण: मैं लेआउट के लिए sheks और ट्विटर बूटस्ट्रैप के लिए haml का उपयोग करता हूं।
मान लीजिए कि हमारे पास एक आवेदन है। और हमें "लेख" वर्ग को हेडर और सामग्री फ़ील्ड के साथ जोड़ने की आवश्यकता है। सामग्री फ़ील्ड प्रकार पाठ की होगी । हमें इसके लिए मार्कडाउन मार्कअप लागू करना होगा।

हमारी कक्षा जोड़ें और उसी समय नियंत्रक और दृश्य-शकी

rails generate scaffold Post title content:text rake db:migrate 

---

मार्कडाउन पार्सर

एक पार्सर के रूप में हम रेडकारपेट का उपयोग करते हैं

 # Gemfile ... gem "redcarpet" 

मार्कडाउन मार्कअप का उपयोग करके टेक्स्ट प्रदर्शित करने के लिए सहायक जोड़ें

 # app/helpers/application_helper.rb module ApplicationHelper def markdown(text) renderer = Redcarpet::Render::HTML.new(hard_wrap: true, filter_html: true) options = { autolink: true, no_intra_emphasis: true, fenced_code_blocks: true, lax_html_blocks: true, strikethrough: true, superscript: true, space_after_headers: true } Redcarpet::Markdown.new(renderer, options).render(text).html_safe end end 

रेडकारपेट :: मार्कडाउन स्वयं मार्कडाउन पार्सर है। Redcarpet :: रेंडर :: HTML रेंडरर्स में से एक है। विशेष रूप से, यह HTML को मार्कडाउन मार्कअप से उत्पन्न करता है। यदि आप चाहें, तो आप अपना रेंडर लिख सकते हैं या मौजूदा वाले से वारिस कर सकते हैं। रेंडरर और पार्सर के लिए संभावित विकल्प प्रलेखन में पाए जा सकते हैं।

सामग्री प्रदर्शित करने के लिए सहायक का उपयोग करें

 -# app/views/posts/show.html.haml %h3= @post.title %p= markdown(@post.content) = link_to 'Edit', edit_post_path(@post) \| = link_to 'Back', posts_path 

अब यदि हम निम्नलिखित सामग्री के साथ एक लेख बनाते हैं

 > this is quotes List: - item 1 - item 2 - item 3 [this is link](http://example.com) ![image](http://placehold.it/350x150) ``` class Cat < Animal def say "Meow!" end end ``` 

फिर हम निम्नलिखित चित्र देखेंगे

---

मार्कडाउन संपादक

प्रोजेक्ट में दृश्य संपादक MarkItUp जोड़ें। आप इसके लिए मार्किटअप-रेल रत्न का उपयोग कर सकते हैं ।

 # Gemfile ... gem 'markitup-rails' 

 # app/assets/javascripts/application.js … //= require markitup … 

 // app/assets/stylesheets/application.css.scss … @import "markitup"; @import "markitup-markdown"; 

अंत में, हम संपादक को लेख को संपादित करने के रूप में हमारे पाठ क्षेत्र पर लागू करते हैं

 # app/assets/javascripts/posts.js.coffee jQuery -> markdownSettings = { previewParserPath: '/markdown/preview' onShiftEnter: {keepDefault:false, openWith:'\n\n'} markupSet: [ { name:'First Level Heading', key:'1', placeHolder:'Your title here...', closeWith: (markItUp) -> markdownTitle(markItUp, '=') }, { name:'Second Level Heading', key:'2', placeHolder:'Your title here...', closeWith: (markItUp) -> markdownTitle(markItUp, '-') }, {name:'Heading 3', key:'3', openWith:'### ', placeHolder:'Your title here...' } {name:'Heading 4', key:'4', openWith:'#### ', placeHolder:'Your title here...' } {name:'Heading 5', key:'5', openWith:'##### ', placeHolder:'Your title here...' } {name:'Heading 6', key:'6', openWith:'###### ', placeHolder:'Your title here...' } {separator:'---------------' } {name:'Bold', key:'B', openWith:'**', closeWith:'**'} {name:'Italic', key:'I', openWith:'_', closeWith:'_'} {separator:'---------------' } {name:'Bulleted List', openWith:'- ' } {name:'Numeric List', openWith: (markItUp) -> markItUp.line+'. ' } {separator:'---------------' } { name:'Picture', key:'P', replaceWith:'![[![Alternative text]!]]([![Url:!:http://]!] "[![Title]!]")' }, { name:'Link', key:'L', openWith:'[', closeWith:']([![Url:!:http://]!] "[![Title]!]")', placeHolder:'Your text to link here...' }, {separator:'---------------'} {name:'Quotes', openWith:'> '} {name:'Code Block / Code', openWith:'(!(\t|!|`)!)', closeWith:'(!(`)!)'} {separator:'---------------'} {name:'Preview', call:'preview', className:"preview"} ] } markdownTitle = (markItUp, char) -> heading = ''; n = $.trim(markItUp.selection||markItUp.placeHolder).length; for i in [0..n] heading += char '\n'+heading $('#post_content').markItUp(markdownSettings) 

जहां post_content टेक्स्ट फ़ील्ड की आईडी है। संपादक सेटिंग्स (markdownSettings) प्रलेखन से ली गई हैं।
और अब एडिट फॉर्म कुछ इस तरह दिखता है

---

पूर्वावलोकन छवि

यह एक पंक्ति पर ध्यान देने योग्य है

 # app/assets/javascripts/posts.js.coffee ... previewParserPath: '/markdown/preview' 

यह सर्वर पृष्ठ का पथ है जो पूर्वावलोकन बनाएगा। हमें इसका एहसास है

 # app/controllers/markdown_controller.rb class MarkdownController < ApplicationController def preview @text = params[:data] end end 

 -# app/views/markdown/preview.html.haml = markdown(@text) 

 # config/routes.rb ... post "markdown/preview" 

और अब हमारे पास एक कार्य पूर्वावलोकन है (उपरोक्त सेटिंग्स के साथ संपादक पैनल पर अंतिम बटन द्वारा बुलाया गया है)

उपयोगी लिंक:

• Markdown
• Redcarpet
• MarkItUp
• इस लेख से परियोजना के स्रोत
• हमारी नई परियोजना , जहां आप लेख में वर्णित एल्गोरिथ्म का वास्तविक अनुप्रयोग देख सकते हैं