javascript আমি সরাসরি তাদের উত্স দেখার পরিবর্তে, GitHub থেকে HTML ফাইলগুলি চালাতে পারি?



(9)

আপনি Modifying Response Requestly দ্বারা এটি সহজেই করতে পারেন যা Chrome এবং ফায়ারফক্স এক্সটেনশন সহ অনুরোধ করা যেতে পারে।

ক্রোম এবং ফায়ারফক্সে:

  1. Requestly জন্য অনুরোধ এবং ফায়ারফক্সের জন্য Requestly ইনস্টল করুন

  2. নিম্নলিখিত শিরোনাম সংশোধনী বিধি যোগ করুন :

    একটি) বিষয়বস্তু-প্রকার :

    • পরিবর্তন করুন
    • প্রতিক্রিয়া
    • শিরোনাম: Content-Type
    • মান: text/html
    • উত্স Url /raw\.githubusercontent\.com/.*\.html/ : /raw\.githubusercontent\.com/.*\.html/


    খ) সামগ্রী-সুরক্ষা-নীতি :

    • পরিবর্তন করুন
    • প্রতিক্রিয়া
    • শিরোনাম: Content-Security-Policy
    • মান: default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval'; default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval';
    • উত্স Url /raw\.githubusercontent\.com/.*\.html/ : /raw\.githubusercontent\.com/.*\.html/

যদি আমার একটি জিথহাব রিপোজিটরিতে .html ফাইল থাকে, উদাহরণস্বরূপ, জাভাস্ক্রিপ্ট পরীক্ষাগুলির এএ সেট চালানোর জন্য, আমি কি সেই পৃষ্ঠাটি সরাসরি দেখতে পারি- এইভাবে পরীক্ষা চালানো যায়?

উদাহরণস্বরূপ, আমি কি কোনোভাবেই আমার পরীক্ষার ফলাফলগুলি দেখতে পারি যা জাভাস্ক্রিপ্ট পরীক্ষা স্যুট দ্বারা উত্পাদিত হবে, আমার স্থানীয় ড্রাইভের রেপো ডাউনলোড বা ক্লোনিং না করে ও সেখানে চালানো হবে?

আমি জানি এটি মূলত স্ট্যাটিক কনটেন্ট হোস্টিং ব্যবসার মধ্যে গিথহুব রাখবে, তবে তারপরে আবার তাদের মাইন-টাইপটি text/plain থেকে text/html পরিবর্তন করতে হবে।


Answer #1

htmlpreview.github.com নামে একটি নতুন সরঞ্জাম রয়েছে, যা আপনি চান তা ঠিক করে। শুধু http://htmlpreview.github.com/? কোনও HTML ফাইলের URL এ, যেমন http://htmlpreview.github.com/?https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html

দ্রষ্টব্য: এই সরঞ্জামটি আসলে একটি github.io পৃষ্ঠা এবং একটি কোম্পানি হিসাবে গিথাবের সাথে সম্বন্ধযুক্ত নয়।


Answer #2

raw.github.com/user/repository আর নেই

সংযোগ করতে, github এ সোর্স কোড থেকে href, আপনি এই ভাবে কাঁচামালের সংযোগস্থলটি ব্যবহার করতে হবে:

raw.githubusercontent.com/user/repository/master/file.extension

EXAMPLE টি

<html>
...
...
<head>    
<script src="https://raw.githubusercontent.com/amiahmadtouseef/tutorialhtmlfive/master/petdecider/script.js"></script>
...
</head>
<body>
...
</html>

Answer #3

এখানে একটি ছোট Greasemonkey স্ক্রিপ্ট যা Github এ HTML পৃষ্ঠাগুলিতে একটি সিডিএন বোতাম যুক্ত করবে

লক্ষ্য পৃষ্ঠা ফর্ম হতে হবে: https://cdn.rawgit.com/user/repo/master/filename.js


// ==UserScript==
// @name        cdn.rawgit.com
// @namespace   github.com
// @include     https://github.com/*/blob/*.html
// @version     1
// @grant       none
// ==/UserScript==

var buttonGroup = $(".meta .actions .button-group");
var raw = buttonGroup.find("#raw-url");
var cdn = raw.clone();
cdn.attr("id", "cdn-url");
cdn.attr("href", "https://cdn.rawgit.com" + cdn.attr("href").replace("/raw/","/") );
cdn.text("CDN");
cdn.insertBefore(raw);

Answer #4

এই ক্রোম ব্রাউজার জন্য শুধুমাত্র সমাধান। আমি অন্য ব্রাউজার সম্পর্কে নিশ্চিত নই।

  1. ক্রোম ব্রাউজারে "সামগ্রী-টাইপ বিকল্পগুলি সংশোধন করুন" এক্সটেনশন যোগ করুন।
  2. ব্রাউজারে ইউআরএল খুলুন "ক্রোম-এক্সটেনশন: //jnfofbopfpaoeojgieggflbpcblhfhka/options.html" URL।
  3. কাঁচা ফাইল ইউআরএল জন্য নিয়ম যোগ করুন। উদাহরণ স্বরূপ:
    • ইউআরএল ফিল্টার: https: ////raw/master//fileName.html
    • মূল প্রকার: টেক্সট / প্লেইন
    • প্রতিস্থাপন প্রকার: টেক্সট / এইচটিএমএল
  4. ফাইল ব্রাউজারটি খুলুন যা আপনি ইউআরএলটি নিয়ম অনুসারে যুক্ত করেছেন (ধাপ 3)।

Answer #5

আমি জিথব মধ্যে এইচটিএমএল এবং জেএস সম্পাদনা করতে চেয়েছিলাম এবং একটি পূর্বরূপ আছে। আমি তাত্ক্ষণিক কমিট এবং সংরক্ষণ করতে github এটা করতে চেয়েছিলেন।

rawgithub.com চেষ্টা করেছি কিন্তু rawgithub.com রিয়েলটাইম ছিল না (এটি একটি মিনিটে একবার ক্যাশ রিফ্রেশ করে)।

তাই আমি দ্রুত আমার নিজস্ব সমাধান উন্নত:

এই জন্য node.js সমাধান: https://github.com/shimondoodkin/rawgithub


Answer #6

@ Niutech এর উত্তরে piggyback করতে, আপনি একটি খুব সহজ বুকমার্ক স্নিপেট তৈরি করতে পারেন।
Chrome ব্যবহার করে, যদিও এটি অন্যান্য ব্রাউজারের সাথে একইভাবে কাজ করে

  1. ডান আপনার বুকমার্ক বার ক্লিক করুন
  2. ফাইল যোগ করুন ক্লিক করুন
  3. এটি Github এইচটিএমএল মত কিছু নাম
  4. URL এর জন্য javascript:top.location="http://htmlpreview.github.com/?"+document.URL টাইপ করুন javascript:top.location="http://htmlpreview.github.com/?"+document.URL
  5. যখন আপনি একটি github ফাইল ভিউ পৃষ্ঠাতে থাকবেন ( raw.github.com নয় ) বুকমার্ক লিঙ্কটি ক্লিক করুন এবং আপনি সোনালী।

Answer #7

আমার প্রোজেক্ট Ratio.js জন্য একই সমস্যা ছিল এবং আমি যা করেছি তা এখানে।

সমস্যা: Github.com সামগ্রী টাইপ / MIME প্লেইন টেক্সট সেটিং করে উৎস দেখানোর সময় রেন্ডারিং / এক্সিকিউটিভ থেকে ফাইলগুলিকে আটকায়।

সমাধান: একটি ওয়েব পেজ ফাইল আমদানি করুন।

উদাহরণ:

অনলাইন ওয়েবপৃষ্ঠা তৈরি করার জন্য jsfiddle.net বা jsbin.com ব্যবহার করুন তারপর এটি সংরক্ষণ করুন। Github.com এ আপনার ফাইলটিতে নেভিগেট করুন এবং ফাইলটিতে সরাসরি লিঙ্ক পেতে 'কাঁচা' বোতামটিতে ক্লিক করুন। সেখানে থেকে, যথাযথ ট্যাগ এবং বৈশিষ্ট্য ব্যবহার করে ফাইলটি আমদানি করুন।

<!DOCTYPE>
<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
    </head>
    <body>
        <h1 id="qunit-header">QUnit example</h1>
        <h2 id="qunit-banner"></h2>
        <div id="qunit-testrunner-toolbar"></div>
        <h2 id="qunit-userAgent"></h2>
        <ol id="qunit-tests"></ol>
        <div id="qunit-fixture">test markup, will be hidden</div>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>  
        <script type="text/javascript" src="https://raw.github.com/LarryBattle/Ratio.js/master/src/Ratio.js"></script>  
        <script type="text/javascript" src="https://raw.github.com/LarryBattle/Ratio.js/master/tests/js/Ratio-testcases.js"></script>  
    </body>
</html>

লাইভ ডেমো: http://jsfiddle.net/jKu4q/2/

দ্রষ্টব্য: jsfiddle.net এর জন্য নোট আপনি ইউআরএল শেষে show যোগ করে ফলাফল পৃষ্ঠায় সরাসরি অ্যাক্সেস পেতে পারেন। তাই লাইক: http://jsfiddle.net/jKu4q/2/show

অথবা .... আপনি একটি প্রকল্প পাতা তৈরি এবং সেখানে থেকে আপনার এইচটিএমএল ফাইল রেন্ডার করতে পারে। আপনি http://pages.github.com/ এ একটি প্রকল্প পৃষ্ঠা তৈরি করতে পারেন।

একবার তৈরি হয়ে গেলে আপনি http://*accountName*.github.com/*projectName*/ উদাহরণের মাধ্যমে লিঙ্কটি অ্যাক্সেস করতে পারেন: http://larrybattle.github.com/Ratio.js/


Answer #8

আপনি আপনার কোডটি চালানোর জন্য ঘন পৃষ্ঠাগুলি শাখা বা এই এক্সটেনশানটি ব্যবহার করতে পারেন (ক্রোম, ফায়ারফক্স): https://github.com/ryt/githtml

আপনার যা প্রয়োজন তা যদি পরীক্ষা হয় তবে আপনি আপনার জেএস ফাইলগুলি এম্বেড করতে পারেন: http://jsperf.com/





github