MDN Live Sample Preview

Displays live samples during preview

  1. // ==UserScript==
  2. // @name MDN Live Sample Preview
  3. // @description Displays live samples during preview
  4. // @match https://developer.mozilla.org/*/docs/preview-wiki-content
  5. // @run-at document-end
  6. // @version 1.1
  7. // @grant none
  8. // @namespace https://gf.qytechs.cn/users/213706
  9. // ==/UserScript==
  10.  
  11.  
  12. function main() {
  13.  
  14. // Add class text-content to have the proper styles
  15. document.getElementById('content').classList.add('text-content');
  16.  
  17. // Update header's ID
  18. var headers = document.querySelectorAll('h1,h2,h3,h4,h5,h6');
  19.  
  20. for(var i=0; i<headers.length; i++) {
  21. var h = headers[i],
  22. id = h.getAttribute('name');
  23.  
  24. if(!id) {
  25. id = h.firstChild.textContent.trim();
  26. id = id.replace(/:/g, ' ');
  27. id = id.replace(/\xa0/g, ' '); // &nbsp;
  28. id = id.replace(/[ _]+/g, '_');
  29. }
  30. h.setAttribute('id', id);
  31. }
  32.  
  33. // Lets you preview the live samples during preview
  34. var iframes = document.querySelectorAll('iframe');
  35.  
  36. for(var j=0; j<iframes.length; j++) {
  37. var iframe = iframes[j];
  38. if(!iframe.id) {
  39. continue;
  40. }
  41.  
  42. var id = iframe.id.replace(/^frame_/, ''),
  43. section = document.getElementById(id);
  44. if(!section) {
  45. console.error("Element \"" + id + "\" doesn't exist");
  46. continue;
  47. }
  48.  
  49. var blocks = {};
  50.  
  51. // Div
  52. if(section.nodeName == 'DIV') {
  53. var pres = section.querySelectorAll('pre');
  54.  
  55. for(var i=0; i<pres.length; i++) {
  56. getPre(blocks, pres[i]);
  57. }
  58.  
  59. // h1,h2,h3,h4,h5,h6
  60. } else {
  61. while(section) {
  62. if(section.nodeName == "PRE") {
  63. getPre(blocks, section);
  64.  
  65. } else {
  66. var pres = section.querySelectorAll('pre');
  67.  
  68. for(var i=0; i<pres.length; i++) {
  69. getPre(blocks, pres[i]);
  70. }
  71. }
  72. section = section.nextElementSibling;
  73.  
  74. if(!section || section.classList.contains("sample-code-table") || section.querySelector("iframe")) {
  75. break;
  76. }
  77. }
  78. }
  79. if(Object.keys(blocks)) {
  80. var html = '';
  81.  
  82. if(blocks.html) {
  83. for(var i=0; i<blocks.html.length; i++) {
  84. html += blocks.html[i].replace(/href="\/files\//g, 'href="https://developer.mozilla.org/files/');
  85. }
  86. }
  87.  
  88. html += '\n<style>';
  89. html += `body { margin: 0; }
  90. .playable-code {
  91. background-color: #f4f7f8;
  92. border: none;
  93. border-left: 6px solid #558abb;
  94. border-width: medium medium medium 6px;
  95. color: #4d4e53;
  96. height: 100px;
  97. width: 90%;
  98. padding: 10px 10px 0;
  99. } .playable-buttons {
  100. text-align: right;
  101. width: 90%;
  102. padding: 5px 10px 5px 26px;
  103. }`;
  104. html += '</style>';
  105. if(blocks.css) {
  106. // put each CSS block in a new tag, to make @namespace work
  107. for(var i=0; i<blocks.css.length; i++) {
  108. html += '<style>\n' + blocks.css[i] + '</style>';
  109. }
  110. }
  111.  
  112. if(blocks.js) {
  113. html += '\n<script>';
  114. for(var i=0; i<blocks.js.length; i++) {
  115. html += '\n' + blocks.js[i];
  116. }
  117. html += '</script>';
  118. }
  119.  
  120. iframe.src = 'data:text/html;charset=utf-8,' + escape(html);
  121. }
  122. }
  123.  
  124. function getPre(blocks, pre) {
  125. var type = pre.className.match(/brush: *(html|js|css)/);
  126.  
  127. if(!type) {
  128. return;
  129. }
  130. type = type[1];
  131.  
  132. if(!blocks[type]){
  133. blocks[type] = [];
  134. }
  135. blocks[type].push(pre.innerText);
  136. }
  137. }
  138.  
  139. window.onload = main();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址