angular.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
  7. <style>
  8. html, body {
  9. padding: 0;
  10. margin: 0;
  11. width: 100%;
  12. height: 100%;
  13. }
  14. #ed-txt-area {
  15. width: 100%;
  16. height: 100%;
  17. min-height: 400px;
  18. box-sizing: border-box;
  19. resize: vertical;
  20. display: block;
  21. padding: 9px;
  22. font-size: 12px;
  23. line-height: 1.42857143;
  24. color: #333;
  25. word-break: break-all;
  26. word-wrap: break-word;
  27. background-color: #f5f5f5;
  28. border: 1px solid #ccc;
  29. border-radius: 4px;
  30. font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  31. }
  32. #banner {
  33. text-align: center;
  34. }
  35. </style>
  36. </head>
  37. <body ng-app="showdownTest">
  38. <div id="banner" class="jumbotron">
  39. <h1>Angular Showdown</h1>
  40. <h3>Showdown integration with angular</h3>
  41. </div>
  42. <div class="container" data-ng-controller="shTestCtrl">
  43. <div class="row">
  44. <div class="col-md-6">
  45. <h2>Markdown</h2>
  46. <textarea id="ed-txt-area" data-ng-model="mdText"></textarea>
  47. <p>*for syntax.txt to load, requires a localhost server</p>
  48. </div>
  49. <div class="col-md-6">
  50. <h2>HTML</h2>
  51. <div data-sd-model-to-html="mdText"></div>
  52. </div>
  53. </div>
  54. </div>
  55. <script src="../src/showdown.js"></script>
  56. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  57. <script src="../src/ng-showdown.js"></script>
  58. <script>
  59. var shTest = angular.module('showdownTest', ['Showdown']);
  60. shTest.controller('shTestCtrl', ['$scope', '$http', function ($scope, $http) {
  61. $scope.mdText = '**foo**';
  62. $http.get('syntax.txt').then(
  63. function (data) {
  64. $scope.mdText = data.data;
  65. },
  66. function (error) {
  67. console.log(error);
  68. alert("couldn't load syntax.txt");
  69. }
  70. )
  71. }]);
  72. </script>
  73. </body>
  74. </html>