语法高亮器 CSS 不起作用答案

【问题标题】：syntaxhighlighter CSS not working语法高亮器 CSS 不起作用
【发布时间】：2014-03-20 21:17:35
【问题描述】：

我将 syntaxhighlighter 库添加到我的项目中以查看 XML 文件。

由于某种原因，当在对话框外使用语法高亮时，我可以看到 CSS 样式，但在对话框内看不到。

这不起作用：

<p:commandButton id="button" 
                         value="View" 
                         oncomplete="hdsWidgetVar.show()"
                         update=":mainForm:hdsForm"
                         disabled="#{object.disableButton}"
                         icon="ui-icon-search"
                         style="float: right"/>
    </p:row>
</p:panelGrid>
<f:verbatim><br/></f:verbatim>
<p:dialog id="hdsDialog" 
          widgetVar="hdsWidgetVar"
          header="HDS" 
          width="800"
          showEffect="clip"
          hideEffect="clip"
          position="left"
          appendTo="@(body)"
          dynamic="true" >
    <h:form id="hdsForm">
        <pre class="brush: xml">    
            <h:outputText value="#{object.selectedObjectSet.hds}" escape="true" />
        </pre>
    </h:form>

</p:dialog>

我不能使用 dynamic="false"，因为我需要在用户按下按钮时刷新对话框文本。

有什么解决办法吗？

谢谢

【问题讨论】：

标签： jsf-2 primefaces syntaxhighlighter

【解决方案1】：

你在嵌套表格吗？使用appendTo 是一种避免嵌套的解决方法。如果可以的话，我不会使用它。

如果您可以分隔表单，这应该可以：

<h:form>    
    <p:panelGrid>
        <p:row>
            <p:commandButton id="button" 
                value="View" 
                oncomplete="hdsWidgetVar.show()"
                process="@form"
                update="@this :hdsForm"
                disabled="#{object.disableButton}"
                icon="ui-icon-search"
                style="float: right"/>

        </p:row>
    </p:panelGrid>
</h:form>

<f:verbatim><br/></f:verbatim>

<p:dialog id="hdsDialog" 
          widgetVar="hdsWidgetVar"
          header="HDS" 
          width="800"
          showEffect="clip"
          hideEffect="clip"
          position="left"
          appendTo="@(body)"
          dynamic="true" >
    <h:form id="hdsForm">
        <pre class="brush: xml">    
            <h:outputText value="#{object.selectedObjectSet.hds}" escape="true" />
        </pre>
    </h:form>

</p:dialog>

如果你不能，这应该去：

<h:form>    
    <p:panelGrid id="panelGrid">
        <p:row>
            <p:commandButton id="button" 
                value="View" 
                oncomplete="hdsWidgetVar.show()"
                process="panelGrid"
                update="@this hdsForm"
                disabled="#{object.disableButton}"
                icon="ui-icon-search"
                style="float: right"/>

        </p:row>
    </p:panelGrid>

    <f:verbatim><br/></f:verbatim>

    <p:dialog id="hdsDialog" 
              widgetVar="hdsWidgetVar"
              header="HDS" 
              width="800"
              showEffect="clip"
              hideEffect="clip"
              position="left">
        <h:panelGroup id="hdsForm">
            <pre class="brush: xml">    
                <h:outputText value="#{object.selectedObjectSet.hds}" escape="true" />
            </pre>
        </h:panelGroup>

    </p:dialog>
</h:form>

但也许这不是与dynamic 相关的问题。更有可能是 lib-to-work-with-ajax 相关。

【讨论】：

谢谢你的建议，我不能用第一个，第二个也不行。

【解决方案2】：

这将解决问题：

  <p:commandButton id="button" 
            value="View" 
            oncomplete="SyntaxHighlighter.highlight();udmWidgetVar.show();"
            process="@form"
            update="@this :hdsForm"
            disabled="#{object.disableButton}"
            icon="ui-icon-search"
            style="float: right"/>

和：

 <p:dialog id="hdsDialog" 
          widgetVar="hdsWidgetVar"
          header="HDS" 
          width="800"
          showEffect="clip"
          hideEffect="clip"
          position="left"
          appendTo="@(body)"
          dynamic="false">
    <h:panelGroup id="hdsForm" >
        <pre class="brush: xml">    
            <h:outputText value="#{object.selectedObjectSet.hds}" escape="true" />
        </pre>
    </h:panelGroup>

【讨论】：