रिसर्च सर्वे: Blockly के साथ अपने अनुभव के बारे में हमें बताएं
सर्वे शुरू करें
रेंडर करने वाले
संग्रह की मदद से व्यवस्थित रहें
अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.
किसी ब्लॉक का आकार, रेंडरर तय करता है. यह आकार, ब्लॉक की परिभाषा (यानी उसके फ़ील्ड और कनेक्शन) के आधार पर तय होता है.
पहले से मौजूद रेंडरर
Blockly में पहले से तीन रेंडरर मौजूद होते हैं. इनमें से हर रेंडरर, प्रोग्राम को अलग तरह से दिखाता है.
| प्रतिपादक |
Description |
इमेज |
| Thrasos
|
सुझाया गया रेंडरर. यह, जेरास रेंडरर का एक ज़्यादा आधुनिक वर्शन है. इसमें, ज़्यादा बराबर स्पेस और सॉलिड बॉर्डर हैं. |
|
| Geras
|
डिफ़ॉल्ट रेंडरर. यह मूल रेंडरर है, जिसकी मदद से Blockly को बनाया गया था. |
|
| Zelos |
Scratch-3.0 ब्लॉक डिज़ाइन पर आधारित रेंडरर. |
 |
इनमें से किसी रेंडरर का इस्तेमाल करने के लिए, कॉन्फ़िगरेशन के विकल्पों में नाम डालें:
Blockly.inject('blocklyDiv', {
renderer: 'thrasos'
});
कस्टम रेंडरर
अगर आपको अपने प्रोग्राम को, पहले से मौजूद किसी भी रेंडरर से अलग लुक और स्टाइल देना है, तो कस्टम रेंडरर भी बनाया जा सकता है. शुरू करने के लिए, Blockly टीम का सुझाव है कि:
- रेंडरर के कॉन्सेप्ट के दस्तावेज़ पढ़ें और जानें कि रेंडरर के सभी कॉम्पोनेंट एक साथ कैसे काम करते हैं.
- कस्टम रेंडरर कोडलैब को पूरा करें, ताकि आपको कस्टम रेंडरिंग के बारे में ज़्यादा जानकारी मिल सके.
- अपने प्रोजेक्ट में डीबग रेंडरर जोड़ें.
- अपने रेंडरर को पसंद के मुताबिक बनाएं.
जब तक कुछ अलग से न बताया जाए, तब तक इस पेज की सामग्री को Creative Commons Attribution 4.0 License के तहत और कोड के नमूनों को Apache 2.0 License के तहत लाइसेंस मिला है. ज़्यादा जानकारी के लिए, Google Developers साइट नीतियां देखें. Oracle और/या इससे जुड़ी हुई कंपनियों का, Java एक रजिस्टर किया हुआ ट्रेडमार्क है.
आखिरी बार 2025-07-25 (UTC) को अपडेट किया गया.
[null,null,["आखिरी बार 2025-07-25 (UTC) को अपडेट किया गया."],[[["\u003cp\u003eBlock shape is determined by a renderer based on the block's definition, including fields and connections.\u003c/p\u003e\n"],["\u003cp\u003eBlockly offers three built-in renderers: Thrasos (recommended), Geras (default), and Zelos (Scratch-3.0 based).\u003c/p\u003e\n"],["\u003cp\u003eCustom renderers can be created for unique program aesthetics by following documentation and tutorials.\u003c/p\u003e\n"]]],[],null,["# Renderers\n\nThe shape of a block is determined by a renderer, based on the\n[block's definition](/blockly/guides/create-custom-blocks/define/block-definitions) (that is, its fields and connections).\n\nBuilt-in renderers\n------------------\n\nBlockly provides three built-in renderers, each of which give a slightly\ndifferent feel to the program.\n\n| Renderer | Description | Image |\n|----------|---------------------------------------------------------------------------------------------------------------------|-------|\n| Thrasos | The recommended renderer. It is a more modern take on the geras renderer, with more even spacing and solid borders. | |\n| Geras | The default renderer. It is the original renderer that Blockly was built with. | |\n| Zelos | A renderer based on Scratch-3.0 block design. | |\n\nTo use one of these renderers, pass the name into the configuration options: \n\n Blockly.inject('blocklyDiv', {\n renderer: 'thrasos'\n });\n\nCustom renderers\n----------------\n\nIf you want to give your program a different look and feel than any of the\nbuilt-in renderers, you can also create a custom renderer. To get started the\nBlockly team recommends you:\n\n1. Read through the [renderer concept docs](/blockly/guides/create-custom-blocks/renderers/concepts/overview) to learn how all of the components of a renderer fit together.\n2. Complete the [custom renderer codelab](https://blocklycodelabs.dev/codelabs/custom-renderer/index.html) to get hands-on practice with custom rendering.\n3. Add the [debug renderer](https://www.npmjs.com/package/@blockly/dev-tools#debug-renderer) to your project.\n4. Customize your renderer."]]
