☰

Cursor Rule Markdown Renderer for GitHub

Renders Cursor Rules (*.mdc) markdown on GitHub into actual Markdown locally, using the marked library.

当前为 2025-05-27 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Cursor Rule Markdown Renderer for GitHub
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2025-05-27
  5. // @description  Renders Cursor Rules (*.mdc) markdown on GitHub into actual Markdown locally, using the marked library.
  6. // @author       Texarkanine
  7. // @match        https://github.com/*
  8. // @icon         data:image/png;base64,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
  9. // @grant        GM_addStyle
  10. // @require      https://cdnjs.cloudflare.com/ajax/libs/marked/15.0.7/marked.min.js
  11. // ==/UserScript==
  12.  
  13. (function() {
  14. 	'use strict';
  15.  
  16. 	// Set to true to enable debug logging
  17. 	const DEBUG = false;
  18.  
  19. 	// GitHub uses these specific selectors for file content display
  20. 	const CONTENT_SECTION = 'section';
  21. 	const MARKDOWN_SOURCE = '#read-only-cursor-text-area';
  22. 	
  23. 	// Only process .mdc files on GitHub
  24. 	const MDC_FILE_REGEX = /^https:\/\/github\.com\/.*\.mdc$/;
  25. 	
  26. 	// Cursor rules have YAML frontmatter that needs special handling
  27. 	const YAML_FRONTMATTER_REGEX = /^---\s*\n([\s\S]*?)\n---\s*\n([\s\S]*)$/;
  28.  
  29. 	// GitHub-compatible markdown styles using GitHub's CSS variables for theme compatibility
  30. 	const MARKDOWN_CSS = `
  31. 		.markdown-body {
  32. 			box-sizing: border-box;
  33. 			min-width: 200px;
  34. 			max-width: 980px;
  35. 			margin: 0 auto;
  36. 			padding: 45px;
  37. 			background: var(--color-canvas-default, #fff);
  38. 			color: var(--color-fg-default, #24292f);
  39. 			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  40. 			font-size: 16px;
  41. 			line-height: 1.5;
  42. 			word-wrap: break-word;
  43. 		}
  44. 		.markdown-body h1, .markdown-body h2, .markdown-body h3, 
  45. 		.markdown-body h4, .markdown-body h5, .markdown-body h6 {
  46. 			margin-top: 24px;
  47. 			margin-bottom: 16px;
  48. 			font-weight: 600;
  49. 			line-height: 1.25;
  50. 		}
  51. 		.markdown-body p {
  52. 			margin-top: 0;
  53. 			margin-bottom: 10px;
  54. 		}
  55. 		.markdown-body pre {
  56. 			background-color: #f6f8fa;
  57. 			padding: 16px;
  58. 			overflow: auto;
  59. 			border-radius: 6px;
  60. 		}
  61. 		.markdown-body code {
  62. 			background-color: #f6f8fa;
  63. 			padding: 0.2em 0.4em;
  64. 			border-radius: 6px;
  65. 			font-size: 85%;
  66. 		}
  67. 		.markdown-body blockquote {
  68. 			padding: 0 1em;
  69. 			color: #6a737d;
  70. 			border-left: 0.25em solid #dfe2e5;
  71. 		}
  72. 		.markdown-body ul, .markdown-body ol {
  73. 			padding-left: 2em;
  74. 		}
  75. 		.markdown-body table {
  76. 			border-collapse: collapse;
  77. 			display: block;
  78. 			width: 100%;
  79. 			overflow: auto;
  80. 		}
  81. 		.markdown-body th, .markdown-body td {
  82. 			border: 1px solid #dfe2e5;
  83. 			padding: 6px 13px;
  84. 		}
  85. 	`;
  86.  
  87. 	let cssInjected = false;
  88.  
  89. 	/**
  90. 	 * Processes .mdc content by wrapping YAML frontmatter in code blocks.
  91. 	 * This is necessary because cursor rules use YAML frontmatter that should
  92. 	 * be displayed as code rather than parsed as markdown.
  93. 	 */
  94. 	function processContent(rawContent) {
  95. 		const match = rawContent.match(YAML_FRONTMATTER_REGEX);
  96. 		
  97. 		if (match) {
  98. 			const [, yamlContent, markdownContent] = match;
  99. 			return `\`\`\`yaml\n${yamlContent}\n\`\`\`\n\n${markdownContent}`;
  100. 		}
  101. 		
  102. 		return rawContent;
  103. 	}
  104.  
  105. 	/**
  106. 	 * Injects GitHub-compatible markdown styles.
  107. 	 * Uses GitHub's CSS variables to match the current theme automatically.
  108. 	 */
  109. 	function injectStyles() {
  110. 		if (cssInjected) return;
  111.  
  112. 		GM_addStyle(MARKDOWN_CSS);
  113. 		cssInjected = true;
  114. 	}
  115.  
  116. 	/**
  117. 	 * Renders the markdown content by replacing the section content.
  118. 	 * Preserves the original textarea as hidden for potential future reference.
  119. 	 */
  120. 	function renderMarkdown() {
  121. 		const section = document.querySelector(CONTENT_SECTION);
  122. 		const textarea = document.querySelector(MARKDOWN_SOURCE);
  123. 		
  124. 		if (!section || !textarea) {
  125. 			return false;
  126. 		}
  127.  
  128. 		const rawContent = textarea.textContent;
  129. 		if (!rawContent) {
  130. 			return false;
  131. 		}
  132.  
  133. 		// Process content and render markdown
  134. 		const processedContent = processContent(rawContent);
  135. 		const markdownDiv = document.createElement('div');
  136. 		markdownDiv.className = 'markdown-body';
  137. 		markdownDiv.innerHTML = marked.parse(processedContent);
  138.  
  139. 		// Replace section content while preserving the original textarea
  140. 		section.innerHTML = '';
  141. 		textarea.style.display = 'none'; // Keep textarea but hide it
  142. 		section.appendChild(textarea);
  143. 		section.appendChild(markdownDiv);
  144.  
  145. 		injectStyles();
  146. 		return true;
  147. 	}
  148.  
  149. 	let contentObserver = null;
  150. 	let lastContent = '';
  151.  
  152. 	/**
  153. 	 * Sets up observation of the textarea content changes.
  154. 	 * This ensures we only render when the actual content changes, not stale content.
  155. 	 */
  156. 	function observeContentChanges() {
  157. 		// Clean up any existing observer
  158. 		if (contentObserver) {
  159. 			contentObserver.disconnect();
  160. 			contentObserver = null;
  161. 		}
  162.  
  163. 		const textarea = document.querySelector(MARKDOWN_SOURCE);
  164. 		if (!textarea) {
  165. 			return false;
  166. 		}
  167.  
  168. 		// Check if content is different from last render
  169. 		const currentContent = textarea.textContent;
  170. 		if (currentContent && currentContent !== lastContent) {
  171. 			lastContent = currentContent;
  172. 			if (renderMarkdown()) {
  173. 				DEBUG && console.log('[mdc-render] Successfully rendered markdown');
  174. 			}
  175. 		}
  176.  
  177. 		// Set up observer for future content changes
  178. 		contentObserver = new MutationObserver(() => {
  179. 			const newContent = textarea.textContent;
  180. 			if (newContent && newContent !== lastContent) {
  181. 				lastContent = newContent;
  182. 				if (renderMarkdown()) {
  183. 					DEBUG && console.log('[mdc-render] Content changed, re-rendered markdown');
  184. 				}
  185. 			}
  186. 		});
  187.  
  188. 		// Observe changes to the textarea's text content
  189. 		contentObserver.observe(textarea, {
  190. 			childList: true,
  191. 			subtree: true,
  192. 			characterData: true
  193. 		});
  194.  
  195. 		return true;
  196. 	}
  197.  
  198. 	/**
  199. 	 * Waits for the textarea to appear, then sets up content observation.
  200. 	 * GitHub loads content asynchronously, so we need to wait for the textarea.
  201. 	 */
  202. 	function waitForTextareaAndObserve() {
  203. 		let attempts = 0;
  204. 		const maxAttempts = 100; // 10 seconds at 100ms intervals
  205. 		
  206. 		const checkInterval = setInterval(() => {
  207. 			attempts++;
  208. 			
  209. 			if (observeContentChanges()) {
  210. 				clearInterval(checkInterval);
  211. 				DEBUG && console.log('[mdc-render] Set up content observation');
  212. 			} else if (attempts >= maxAttempts) {
  213. 				clearInterval(checkInterval);
  214. 				DEBUG && console.log('[mdc-render] Timeout waiting for textarea');
  215. 			}
  216. 		}, 100);
  217. 	}
  218.  
  219. 	/**
  220. 	 * Handles URL changes to detect navigation to .mdc files.
  221. 	 * GitHub is a SPA, so we need to monitor URL changes via DOM mutations.
  222. 	 */
  223. 	function handleUrlChange() {
  224. 		if (MDC_FILE_REGEX.test(location.href)) {
  225. 			DEBUG && console.log('[mdc-render] MDC file detected:', location.href);
  226. 			waitForTextareaAndObserve();
  227. 		}
  228. 	}
  229.  
  230. 	// Initialize: handle current page and set up URL change detection
  231. 	let currentUrl = location.href;
  232. 	handleUrlChange();
  233.  
  234. 	// Monitor for URL changes in GitHub's SPA
  235. 	new MutationObserver(() => {
  236. 		if (location.href !== currentUrl) {
  237. 			currentUrl = location.href;
  238. 			handleUrlChange();
  239. 		}
  240. 	}).observe(document, { subtree: true, childList: true });
  241.  
  242. })();