You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

342 lines
15 KiB

6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
  1. <html>
  2. <head>
  3. <title>VHDL Beautifier, Formatter Online</title>
  4. <style>
  5. body {
  6. margin: 0 auto;
  7. max-width: 960px;
  8. tab-size: 4;
  9. font-family: Helvetica, arial;
  10. }
  11. textarea {
  12. width: 100%;
  13. font-family: Consolas, Courier;
  14. }
  15. .btn {
  16. margin: 10px 10px;
  17. padding: 5px 8px;
  18. font-size: 16px;
  19. line-height: 1.33;
  20. border-radius: 3px;
  21. color: #333;
  22. border-color: #ccc;
  23. cursor: pointer;
  24. text-align: center;
  25. white-space: nowrap;
  26. border: 1px solid rgb(194, 194, 194);
  27. }
  28. .btn:hover {
  29. background-color: #afd9ee;
  30. }
  31. .show {
  32. display: none;
  33. }
  34. input[type="checkbox"]+label {
  35. display: inline-block;
  36. width: 19px;
  37. height: 19px;
  38. margin: -1px 4px 0 0;
  39. }
  40. .wordwrap {
  41. white-space: pre-wrap;
  42. white-space: -moz-pre-wrap;
  43. white-space: -pre-wrap;
  44. white-space: -o-pre-wrap;
  45. word-wrap: break-word;
  46. }
  47. label {
  48. cursor: pointer;
  49. line-height: 1.5em;
  50. }
  51. label:hover {
  52. color: #555;
  53. text-decoration: underline;
  54. }
  55. form {
  56. margin-bottom: 0px;
  57. }
  58. form span {
  59. width: 170px;
  60. display: inline-block;
  61. text-align: right;
  62. }
  63. a {
  64. color: #4b9aff;
  65. text-decoration: none;
  66. }
  67. a:hover {
  68. text-decoration: underline;
  69. }
  70. </style>
  71. <link href="highlight.css" rel="stylesheet" />
  72. <script src="highlight.js"></script>
  73. <script>
  74. function selectText(element) {
  75. var doc = document,
  76. text = element,
  77. range, selection;
  78. if (doc.body.createTextRange) { //ms
  79. range = doc.body.createTextRange();
  80. range.moveToElementText(text);
  81. range.select();
  82. } else if (window.getSelection) { //all others
  83. selection = window.getSelection();
  84. range = doc.createRange();
  85. range.selectNodeContents(text);
  86. selection.removeAllRanges();
  87. selection.addRange(range);
  88. }
  89. }
  90. </script>
  91. </head>
  92. <body>
  93. <h2>VHDL Beautifier, Formatter</h2>
  94. <h4>Beautify and format your VHDL code online</h4>
  95. <p>
  96. Proper formatting makes code easier to read and understand.
  97. <br> Please make a backup before you replace your code!
  98. <br>
  99. <a href="https://github.com/g2384/g2384.github.io/issues" target="_blank">Report bugs if your code is not properly formatted, please provide sample code which causes the failure</a>
  100. </p>
  101. <div id="lastModified"></div>
  102. <textarea id="in" rows="10" wrap="off"></textarea>
  103. <br>
  104. <form id="keyword">Keyword Case:
  105. <label>
  106. <input type="radio" name="keywordcase" value="UpperCase" checked="checked">UPPERCASE</label>
  107. |
  108. <label>
  109. <input type="radio" name="keywordcase" value="LowerCase">lowercase</label>
  110. |
  111. <label>
  112. <input type="radio" name="keywordcase" value="DefaultCase">Default</label>
  113. </form>
  114. <label>
  115. <input type="checkbox" id="no_format" onclick="noFormat()">Only highlight, don't format</label>
  116. <br> New line after
  117. <br>
  118. <form id="new_line_after_then">
  119. <span>THEN</span>
  120. <label>
  121. <input type="radio" name="new_line_after_thencase" value="NewLine" checked="checked">New Line</label>
  122. <label>
  123. <input type="radio" name="new_line_after_thencase" value="NoNewLine">No New Line</label>
  124. <label>
  125. <input type="radio" name="new_line_after_thencase" value="None">None</label>
  126. </form>
  127. <form id="new_line_after_semicolon">
  128. <span>semicolon ";"</span>
  129. <label>
  130. <input type="radio" name="new_line_after_semicoloncase" value="NewLine" checked="checked">New Line</label>
  131. <label>
  132. <input type="radio" name="new_line_after_semicoloncase" value="NoNewLine">No New Line</label>
  133. <label>
  134. <input type="radio" name="new_line_after_semicoloncase" value="None">None</label>
  135. </form>
  136. <form id="new_line_after_else">
  137. <span>ELSE</span>
  138. <label>
  139. <input type="radio" name="new_line_after_elsecase" value="NewLine" checked="checked">New Line</label>
  140. <label>
  141. <input type="radio" name="new_line_after_elsecase" value="NoNewLine">No New Line</label>
  142. <label>
  143. <input type="radio" name="new_line_after_elsecase" value="None">None</label>
  144. </form>
  145. <form id="new_line_after_port">
  146. <span>PORT or PORT MAP</span>
  147. <label>
  148. <input type="radio" name="new_line_after_portcase" value="NewLine">New Line</label>
  149. <label>
  150. <input type="radio" name="new_line_after_portcase" value="NoNewLine">No New Line</label>
  151. <label>
  152. <input type="radio" name="new_line_after_portcase" value="None" checked="checked">None</label>
  153. </form>
  154. <form id="new_line_after_generic">
  155. <span>GENERIC</span>
  156. <label>
  157. <input type="radio" name="new_line_after_genericcase" value="NewLine">New Line</label>
  158. <label>
  159. <input type="radio" name="new_line_after_genericcase" value="NoNewLine">No New Line</label>
  160. <label>
  161. <input type="radio" name="new_line_after_genericcase" value="None" checked="checked">None</label>
  162. </form>
  163. <br>
  164. <label>
  165. <input type="checkbox" id="remove_comments">Remove commments</label>
  166. |
  167. <label>
  168. <input type="checkbox" id="remove_lines">Remove blank lines</label>
  169. |
  170. <label>
  171. <input type="checkbox" id="remove_report">Remove REPORT</label>
  172. <br>
  173. <label>
  174. <input type="checkbox" id="check_alias">Check ALIAS (every long name is replaced with ALIAS)</label>
  175. <br>
  176. <label>
  177. <input type="checkbox" id="sign_align">Align signs in PORT()</label>
  178. <br>
  179. <label>
  180. <input type="checkbox" id="sign_align_all">Align signs in all places</label>
  181. <br>
  182. <label>
  183. <input type="checkbox" id="use_space">Customise Indentation (tab is \t): </label>
  184. <input type="text" id="cust_indent" size="8" onKeyUp="indent_decode()" value=" " /> (
  185. <span id="indent_s">four blankspace</span>)
  186. <br>
  187. <label>
  188. <input type="checkbox" id="compress">! EVIL - compress VHDL (\r\n, comments will be removed)</label>
  189. <br>
  190. <label>
  191. <input type="checkbox" id="mix_letter">! EVIL - unreadable (mix upper/lower-case letters)</label>
  192. <br>
  193. <input type="button" class="btn" onclick="f()" value="start" />
  194. <span class="show">
  195. <input type="button" class="btn " id="selectAll" value="Select All" onclick="selectText(document.getElementById('vhdl'))"
  196. />
  197. <label>
  198. <input type="checkbox" onclick="wordWrap()" id="">Word wrap</label>
  199. </span>
  200. <br>
  201. <pre id="result"><code class="vhdl" id="vhdl">
  202. <font style="background-color:#9D9D9D; color:#fff"> output sample </font>
  203. <span class="hljs-keyword">LIBRARY</span> IEEE; <span class="hljs-comment">-- declare the library</span>
  204. <span class="hljs-keyword">USE</span> IEEE.std_logic_1164.<span class="hljs-keyword">ALL</span>;
  205. <span class="hljs-keyword">USE</span> IEEE.std_logic_arith.<span class="hljs-keyword">ALL</span>;
  206. <font style="background-color:#9D9D9D; color:#fff"> (All reserved words are in capital) </font>
  207. <font style="background-color:#9D9D9D; color:#fff"> (All indents are in the right place) </font>
  208. <span class="hljs-comment">---------------------------------------------------------------</span>
  209. <span class="hljs-keyword">ENTITY</span> example <span class="hljs-keyword">IS</span>
  210. <span class="hljs-keyword">PORT</span> (
  211. rst : <span class="hljs-keyword">IN</span> <span class="hljs-typename">std_logic</span>;
  212. clk : <span class="hljs-keyword">IN</span> <span class="hljs-typename">std_logic</span>;
  213. example_of_long_words : <span class="hljs-keyword">OUT</span> <span class="hljs-typename">std_logic_vector</span>(<span class="hljs-number">3</span> <span class="hljs-keyword">DOWNTO</span> <span class="hljs-number">0</span>)
  214. <font style="background-color:#9D9D9D; color:#fff"> (<strong>Align signs in PORT()</strong> aligns these colons) </font>
  215. );
  216. <span class="hljs-keyword">END</span> example;
  217. <span class="hljs-keyword">ARCHITECTURE</span> EXA <span class="hljs-keyword">OF</span> example <span class="hljs-keyword">IS</span>
  218. <span class="hljs-keyword">ALIAS</span> slv <span class="hljs-keyword">IS</span> <span class="hljs-typename">std_logic_vector</span>;
  219. <span class="hljs-keyword">SUBTYPE</span> bit4 <span class="hljs-keyword">IS</span> slv(<span class="hljs-number">3</span> <span class="hljs-keyword">DOWNTO</span> <span class="hljs-number">0</span>); <font style="background-color:#9D9D9D; color:#fff"> (<strong>Check ALIAS</strong> replaces all "<strong>std_logic_vector</strong>" with "<strong>slv</strong>") </font>
  220. <span class="hljs-keyword">BEGIN</span>
  221. <del><span class="hljs-keyword">REPORT</span> <span class="hljs-string">"Hello World"</span></del>; <font style="background-color:#9D9D9D; color:#fff"> (Remove REPORT) </font>
  222. stages : <span class="hljs-keyword">PROCESS</span> (rst, clk)
  223. <span class="hljs-keyword">BEGIN</span>
  224. <span class="hljs-keyword">IF</span> (rst = <span class="hljs-literal">'0'</span>) <span class="hljs-keyword">THEN</span>
  225. <span class="hljs-keyword">CASE</span> bit4 <span class="hljs-keyword">IS</span>
  226. <span class="hljs-keyword">WHEN</span> <span class="hljs-string">"0000"</span> =&gt; bit4 &lt;= <span class="hljs-string">"0001"</span>;
  227. <span class="hljs-keyword">WHEN</span> <span class="hljs-string">"0001"</span> =&gt; bit4 &lt;= <span class="hljs-string">"0100"</span>;
  228. <span class="hljs-keyword">WHEN</span> <span class="hljs-string">"0010"</span> =&gt; bit4 &lt;= <span class="hljs-string">"0010"</span>;
  229. <span class="hljs-keyword">WHEN</span> <span class="hljs-string">"0100"</span> =&gt; bit4 &lt;= <span class="hljs-string">"0000"</span>;
  230. <span class="hljs-keyword">WHEN</span> <span class="hljs-keyword">OTHERS</span> =&gt;
  231. <del><span class="hljs-keyword">REPORT</span> <span class="hljs-string">"Are there any more cases?"</span></del>; <font style="background-color:#9D9D9D; color:#fff"> (Remove REPORT) </font>
  232. <span class="hljs-keyword">END</span> <span class="hljs-keyword">CASE</span>;
  233. <span class="hljs-keyword">ELSIF</span> (clk<span class="hljs-attribute">'event</span> <span class="hljs-keyword">AND</span> clk = <span class="hljs-literal">'1'</span>) <span class="hljs-keyword">THEN</span>
  234. <span class="hljs-keyword">IF</span> (bit4 = '<span class="hljs-number">0111</span>') <span class="hljs-keyword">THEN</span>
  235. bit4 &lt;= <span class="hljs-string">"0000"</span>;
  236. <span class="hljs-keyword">ELSE</span>
  237. bit4 &lt;= <span class="hljs-string">"1111"</span>;
  238. <span class="hljs-keyword">END</span> <span class="hljs-keyword">IF</span>;
  239. <del><span class="hljs-comment">-- Sample comments 1;</span> </del>
  240. <del> <span class="hljs-comment">-- Sample comments 2;</span></del> <font style="background-color:#9D9D9D; color:#fff"> (Remove comments) </font>
  241. <span class="hljs-keyword">END</span> <span class="hljs-keyword">IF</span>;
  242. <span class="hljs-keyword">END</span> <span class="hljs-keyword">PROCESS</span>;
  243. <span class="hljs-keyword">END</span> EXA;</code></pre>
  244. <script>
  245. var exports = {};
  246. </script>
  247. <script src="VHDLFormatter.js"></script>
  248. <script>
  249. let lastModifiedDate = fetchHeader(location.href, 'Last-Modified');
  250. if (lastModifiedDate != "") {
  251. document.getElementById("lastModified").innerHTML = "<p>Last modified: " + lastModifiedDate + "</p>";
  252. }
  253. function f() {
  254. var input = document.getElementById("in").value;
  255. var no_format = document.getElementById("no_format").checked;
  256. if (no_format) {
  257. document.getElementById("vhdl").innerHTML = input;
  258. document.querySelector(".show").style.display = "inline-block";
  259. hljs.highlightBlock(document.getElementById("vhdl"));
  260. return;
  261. }
  262. var remove_comments = document.getElementById("remove_comments").checked;
  263. var remove_lines = document.getElementById("remove_lines").checked;
  264. var remove_report = document.getElementById("remove_report").checked;
  265. var check_alias = document.getElementById("check_alias").checked;
  266. var sign_align = document.getElementById("sign_align").checked;
  267. var sign_align_all = document.getElementById("sign_align_all").checked;
  268. var new_line_after_port = document.getElementById("new_line_after_port").elements.namedItem("new_line_after_portcase").value;
  269. var new_line_after_then = document.getElementById("new_line_after_then").elements.namedItem("new_line_after_thencase").value;
  270. var new_line_after_semicolon = document.getElementById("new_line_after_semicolon").elements.namedItem("new_line_after_semicoloncase").value;
  271. var new_line_after_else = document.getElementById("new_line_after_else").elements.namedItem("new_line_after_elsecase").value;
  272. var new_line_after_generic = document.getElementById("new_line_after_generic").elements.namedItem("new_line_after_genericcase").value;
  273. var use_space = document.getElementById("use_space").checked;
  274. var compress = document.getElementById("compress").checked;
  275. var cust_indent = document.getElementById("cust_indent").value;
  276. var keywordcase = document.getElementById("keyword").elements.namedItem("keywordcase").value;
  277. var mix_letter = document.getElementById("mix_letter").checked;
  278. if (compress) {
  279. remove_comments = true;
  280. }
  281. indentation = "\t";
  282. if (use_space) {
  283. cust_indent = cust_indent.replace(/\\t/, " ");
  284. indentation = cust_indent;
  285. }
  286. var newLineSettingsDict = {};
  287. newLineSettingsDict["generic"] = new_line_after_generic;
  288. newLineSettingsDict["port"] = new_line_after_port;
  289. newLineSettingsDict[";"] = new_line_after_semicolon;
  290. newLineSettingsDict["then"] = new_line_after_then;
  291. newLineSettingsDict["else"] = new_line_after_else;
  292. newLineSettings = ConstructNewLineSettings(newLineSettingsDict);
  293. beautifierSettings = new BeautifierSettings(remove_comments, remove_report, check_alias, sign_align,
  294. sign_align_all,
  295. keywordcase, indentation, newLineSettings);
  296. input = beautify(input, beautifierSettings);
  297. if (remove_lines) {
  298. input = input.replace(/(\r\n)*[ \t]*\r\n/g, '\r\n');
  299. }
  300. if (compress) {
  301. input = Compress(input);
  302. }
  303. if (mix_letter) {
  304. input = MixLetters(input);
  305. }
  306. document.getElementById("vhdl").innerHTML = input;
  307. document.querySelector(".show").style.display = "inline-block";
  308. hljs.highlightBlock(document.getElementById("vhdl"));
  309. }
  310. </script>
  311. </body>
  312. </html>