开发语法应用程序SharePoint Online PrismJS

时间:2015-06-10 11:46:09

标签: javascript css sharepoint office365

我正在尝试使用Napa构建SharePoint Online应用程序以使用语法突出显示。我已经开始了一个新项目,并在Default.aspx网页中包含.js和.css文件。当我尝试创建突出显示的代码块时,它将无法工作。

PS:我不是编码员:)

.js和.css文件上传到脚本和内容文件夹中,default.aspx的代码如下所示:

<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>

<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>

    <!-- Add your CSS styles to the following file -->
    <link rel="Stylesheet" type="text/css" href="../Content/prism.css" />
    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />

    <!-- Add your JavaScript to the following file -->
    <script type="text/javascript" src="../Scripts/prism.js"></script>
    <script type="text/javascript" src="../Scripts/App.js"></script>
</asp:Content>

<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <pre class="line-numbers"><code class="language-*">
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>I can haz embedded CSS and JS</title>
            <style>
                @media print {
                    p { color: red !important; }
                }
            </style>
        </head>
        <body>
            <h1>I can haz embedded CSS and JS</h1>
            <script>
            if (true) {
                console.log('foo');
            }
            </script>

        </body>
        </html>
    </code></pre>
</asp:Content>

2 个答案:

答案 0 :(得分:1)

您错过了<code></code>代码。

Prism.js不会突出显示任何语法not encased within the code标记。

答案 1 :(得分:0)

在脚本标记中添加type =&#34; text / javascript。还要把&#39; if&#39;在一个功能下。