GitCode.vue 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <template>
  2. <pre>
  3. <code class="typescript" v-html="code"></code>
  4. </pre>
  5. </template>
  6. <script>
  7. import axios from "axios"
  8. export default {
  9. name: "GitCode",
  10. props:{
  11. project: {
  12. type: String,
  13. default: '/web/persagy-web'
  14. },
  15. raw: {
  16. type: String,
  17. default: '/raw/master'
  18. },
  19. fileUrl: {
  20. type: String,
  21. default: '/persagy-web-big/src/items/SIconTextItem.ts '
  22. },
  23. type: {
  24. type: String,
  25. default: 'js'
  26. }
  27. },
  28. data(){
  29. return{
  30. baseUrl: '/git',
  31. username: 'lbsl',
  32. password: '20200829',
  33. code:''
  34. }
  35. },
  36. created() {
  37. this.init()
  38. },
  39. computed:{
  40. requestUrl(){
  41. return this.baseUrl + this.project + this.raw + this.fileUrl;
  42. }
  43. },
  44. methods: {
  45. init(){
  46. axios({
  47. method: "get",
  48. url: this.requestUrl,
  49. headers: {
  50. 'Authorization': "Basic " + btoa(this.username + ":" + this.password)
  51. }
  52. }).then(res => {
  53. import("prismjs/prism").then(Prism => {
  54. this.Prism = Prism;
  55. console.log(this.Prism.languages);
  56. this.code = this.Prism.highlight(
  57. res.data,//想要高亮的内容
  58. this.Prism.languages[this.type],
  59. this.type
  60. );
  61. });
  62. })
  63. }
  64. }
  65. }
  66. </script>
  67. <style scoped>
  68. </style>